webpack 本地安装

  • 安装本地webpack
  • webpack webpack-cli -D (yarn,npm)

webpack可以进行0配置

  • 打包工具 -> 输出结果是js模块

手动配置webpack

  • 默认配置文件名字 webpack.config.js
  • mode,entry,output
  • 更改package.json 的scripts执行自定义打包
  • 安装 webpack-dev-sercer -D 启动本地服务 npx webpack-dev-server
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
//node写法

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
devServer: { //开发服务器的配置
port: 3000,//端口
progress: true,//进度条
contentBase: "./dist",//默认打开路径
open: true,//自动打开浏览器
compress: true,//启动gzip压缩
},
mode:'production', //希望打包后的看的清楚,默认两种,生产和开发 production development
entry: './src/index.js', // 入口
output: {
filename: "wenzhe.[hash:4].js", //打包文件名
path: path.resolve(__dirname,'dist'),//路径必须是绝对路径,习惯性加__dirname 以当前路径下
},
plugins: [//数组,放着所有的插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {//参看参数:https://github.com/kangax/html-minifier#options-quick-reference
removeAttributeQuotes:true,
collapseWhitespace:true
},
hash: true
})
]
}

样式处理

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
module: {//模块
//规则
rules: [//loader特点,希望单一,loader有顺序的,从右向左执行,从下到上执行
//css-loader解析@import这种语法
//style-loader 把css插入到head的标签中
{
test:/\.css$/,
use:[
{
loader: "style-loader",
options:{
insertAt: 'top'//插入到顶部
}
},
'css-loader',//可以数组也可以字符串
]
},
{//增加处理less
test:/\.less/,
use:[
{
loader: "style-loader",
options:{
insertAt: 'top'//插入到顶部
}
},
'css-loader',//可以数组也可以字符串
'less-loader'
]
},
]
}

最终

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
//node写法

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');//https://www.npmjs.com/package/html-webpack-plugin
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//https://www.npmjs.com/package/mini-css-extract-plugin
let OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");//用来压缩抽离之后的css,单独使用这个插件js会停止压缩,要单独引用'uglifyjs-webpack-plugin'
let UglifyJsPlugin = require("uglifyjs-webpack-plugin");//压缩JS
module.exports = {
devServer: { //开发服务器的配置
port: 3000,//端口
progress: true,//进度条
contentBase: "./dist",//默认打开路径
open: true,//自动打开浏览器
compress: true,//启动gzip压缩
},
optimization: {//优化项
minimizer: [
new UglifyJsPlugin({
cache: true, //是否使用缓存
parallel: true, //是否并发打包
sourceMap: true //es6->es5源码映射
}),
new OptimizeCSSAssetsPlugin()
]
},
mode:'production', //希望打包后的看的清楚,默认两种,生产和开发 production development
entry: './src/index.js', // 入口
output: {
filename: "wenzhe.[hash:4].js", //打包文件名
path: path.resolve(__dirname,'dist'),//路径必须是绝对路径,习惯性加__dirname 以当前路径下
},
plugins: [//数组,放着所有的插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {//参看参数:https://github.com/kangax/html-minifier#options-quick-reference
removeAttributeQuotes:true,
collapseWhitespace:true
},
hash: true
}),
new MiniCssExtractPlugin({
filename: 'main.css'
})
],
module: {//模块
//规则
rules: [//loader特点,希望单一,loader有顺序的,从右向左执行,从下到上执行
//css-loader解析@import这种语法
//style-loader 把css插入到head的标签中
{
test:/\.css$/,
use:[
//经过抽离,防止抽离出来的再放入style标签
// {
// loader: "style-loader",
// options:{
// insertAt: 'top'//插入到顶部
// }
// },
MiniCssExtractPlugin.loader,
'css-loader',//可以数组也可以字符串
'postcss-loader',//解析css之前,用来给抽离style标签的css加浏览器前缀(-webkit-)之后的解析 增加postcss.config.js
]
},
{
test:/\.less/,
use:[
//经过抽离,防止抽离出来的再放入style标签
// {
// loader: "style-loader",
// options:{
// insertAt: 'top'//插入到顶部
// }
// },
MiniCssExtractPlugin.loader,
'css-loader',//可以数组也可以字符串
'postcss-loader',
'less-loader'
]
},
]
}
}