一、Webpack详解
1、概念
webpack是一个现代化的javascript应用的静态模块打包工具
2、Webpack安装
全局安装 -g
1
npm install webpack@3.6.0 -g //全局安装
局部安装
如果在package.json中定义了script时,其中包含了webpack命令,那么就是局部安装
3、配置webpack
项目初始化–生成package.json
1
npm init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15{
"name": "webpack-01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.37.0"
}
}
配置入口文件,出口文件
1
2
3
4
5
6
7
8
9const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
}
js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19// ./src/main.js
const math = require("./mainUtils.js")
console.log("hello vue")
console.log(math.add(20, 30));
console.log(math.mul(20,30))
// ./src/mainUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,
mul
}通过package.json中设置的build简化运行的操作
1
npm run build
3、加载css img 等文件
1 | npm install --save-dev css-loader |
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
limit:12000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
}
]
}
4、ES6语法处理(理论可行,尝试后不起作用)
1 | npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 |
1 | //webpack.config.js |
5、vue配置
安装vue
1
npm install vue --save
配置webpack.config.js
1
2
3
4
5
6
7
8module.exports = {
// 配置默认使用哪个版本的vue.js
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
}main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20import Vue from 'vue'
const app = new Vue({
el:'#app',
data:{
message:'hello'
},
methods:{
btnClick(){
console.log("ceshi");
}
},
template:`
<div>
<h2>{{message}}</h2>
<button @click="btnClick">按钮</button>
</div>
`
})
6、vue 组件化开发引入
vue-loader v15版本会报错。
解决方案:回退到14版本
1
2npm uninstall vue-loader
npm install vue-loader@14.2.2vue/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: 'Hello Webpack',
name: '111'
}
},
methods: {
btnClick() {
console.log("ceshi");
}
}
}
</script>
<style scoped>
.title {
color: green;
}
</style>
- App.vue 再引入Cpn.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60//App.vue
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
<Cpn/>
</div>
</template>
<script>
import Cpn from './Cpn.vue'
export default {
name: "App",
data() {
return {
message: 'Hello Webpack',
name: '111'
}
},
methods: {
btnClick() {
console.log("ceshi");
}
},
components:{
Cpn
}
}
</script>
<style scoped>
.title {
color: green;
}
</style>
//Cpn.vue
<template>
<div>
<h2>我是cpn组件的标题</h2>
<p>我是cpn组件的内容, 哈哈哈</p>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
name: "Cpn",
data() {
return {
name: 'CPN组件的name'
}
}
}
</script>
<style scoped>
</style>
二、plugin
1、概念
plugin是插件的意思,通常是对某个现有架构进行扩展,他是对webpack本身的一个扩展,是扩展器,比如打包优化,文件压缩等,某些webpack已经内置的插件不需要安装
2、使用方法
- 通过npm安装
- 在webpack.config.js中plugins中配置插件
3、webpack自带插件按BannerPlugin——添加最终版权插件
修改webpack.config.js
1
2
3
4
5
6const webpack = require('webpack')
module.exports = {
plugins:[
new webpack.BannerPlugin('最终版权归aaaa')
]
}
4、HtmlWebpackPlugin插件——打包html的plugin插件
npm安装插件
1
npm install html-webpack-plugin --save-dev
修改webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12//引入插件
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins:[
new webpack.BannerPlugin('最终版权归aaaa'),
// 可以根据模板生成index.html
new HtmlWebpackPlugin({
template:'index.html'
})
]
}
5、uglifyjs-webpack-plugin——js压缩的plugin插件
npm安装
1
npm install uglifyjs-webpack-plugin --save-dev
配置webpack.config.js
1 | const uglifyJsPlugin = require('uglifyjs-webpack-plugin') |
三、搭建本地服务器
npm安装
- 安装的时候要指定3.*的版本,否则会报错,运行
npm run dev
遇到的问题:Error: Cannot find module ‘webpack-cli/bin/config-yargs’,-D表示写入package.js中
1
npm install webpack-cli@3 -D
- 安装的时候要指定3.*的版本,否则会报错,运行
配置webpack.config.js
1
2
3
4
5
6module.exports = {
devServer:{
contentBase:'./dist', //表示监听/dist目录
inline:true//表示实时刷新
}
}package.json配置dev指令
1
2
3
4
5"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open"//--open 只运行后直接打开浏览器
},配置分离操作
安装webpack-merge
1
npm install webpack-merge --save-dev
base.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../dist'),//__dirname只当前目录的上一级目录
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
limit:12000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
],
},
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin('最终版权归aaaa'),
new HtmlWebpackPlugin({
template:'index.html'
})
],
}dev.config.js
1
2
3
4
5
6
7
8const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')//注意这里需要加./
module.exports = webpackMerge.merge(baseConfig,{
devServer:{
contentBase:'./dist',
inline:true
}
})prod.config.js
1
2
3
4
5
6
7
8const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')//注意这里需要加./
module.exports = webpackMerge.merge(baseConfig,{
plugins:[
new uglifyJsPlugin(),
],
})修改package.json
1
2
3
4
5
6
7{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},
}