webpack使用小计

初始化-安装

1
2
3
4
5
6
7
8
9
10
npm init -y 

npm install webpack webpack-dev-server webpack-cli --save-dev

三者缺一不可。开发到打包必备

或者使用yarn  (这里npm 安装包不太推荐用yarn 因为好多资源 yarn 安装会出错。避免不必要的麻烦就直接 npm )

yarn add webpack webpack-cli webpack-dev-server --dev

npx webpack 这里的npx

Node 自带 npm 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下。 npm install -g npx

npx 将资源下载到一个临时目录，使用以后再删除

如果步骤不对，重新再来。中途重来会导致一系列问题

起步

安装依赖

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

1. css生成单独文件  / 已有更新的方法替代
npm install extract-text-webpack-plugin --save-dev 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //css生成单独文件

2. 推荐使用的webpack css 处理模块
npm install --save-dev mini-css-extract-plugin 

------------
// 构建优化插件
//optimization与entry/plugins同级
optimization: { //合并压缩
	minimize: true,
	minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},

optimization: {
	minimize: true,
	minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
	splitChunks: {
		cacheGroups: { // 多个css 提取到一个styles.css文件中
			styles: {
				name: 'styles',
				test: /\.css$/,
				chunks: 'all',
				enforce: true,
			},
		},
	},
},

plugins: [
	new HtmlWebpackPlugin({ //html
		template: './src/index.html',
	}),
	new MiniCssExtractPlugin({
		filename: '[name].css',
		chunkFilename: '[id].css',
	})

],

------------


正常配置

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
entry:'./src/index.js',
output: {
	filename: 'main.js', //单个文件名字
	path: __dirname + '/dist'//另一种配置出口地址方法
},
-----另一种配置-----
entry: { 
	index: './src/index.js'
},
output: {
	filename: '[name].js',
	path: path.resolve(__dirname, 'dist')
},
module: {
	rules: [
		{
			test: /\.less$/,
			// use: ['style-loader', 'css-loader', 'less-loader']
			use: [{
				loader: MiniCssExtractPlugin.loader,
				options: {
					esModule: true,
				}
			}, 'css-loader', 'less-loader']
		},
	]
},
devServer: {
	port: 8099,
	// 实现支持Broswer路由
	historyApiFallback: true,
	hot: true,
	// contentBase: 'dist',
	host: 'localhost',
	compress: true,
	open: true
},

坑

坑1

1
2
3
4
5
6
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead解决

webpack4.0以上用3.x extract-webpack-plugin 打包会不兼容，extract-webpack-plugin升级就可以了

npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0

坑2

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
Error: Cannot find module '@babel

问题产生的原因
babel-loader和babel-core版本不对应所产生的，

babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x

如何解决
1、 卸载旧的babel-core
npm un babel-core
2、 安装新的babel-core
npm i -D @babel/core
3、 卸载旧的babel-preset
npm un babel-preset-env
npm un babel-preset-stage-0
4、 安装新的babel-preset
npm i @babel/preset-react
npm i @babel/preset-env
npm i babel-preset-mobx
5、 卸载旧的babel-plugin
npm un babel-plugin-transform-runtime
6、 安装新的babel-plugin
npm install --save-dev @babel/plugin-proposal-object-rest-spread
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
7、 修改.babelrc文件

{
    "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

完整的 webpack.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
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
85
86
87
88
89
90
91
92

const path = require('path');
const webpack = require('webpack');
// 导入非 webpack 自带默认插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css 处理
const TerserJSPlugin = require('terser-webpack-plugin'); // js压缩
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //css压缩

let env = process.env.NODE_ENV == "development" ? "development" : "production";

module.exports = {
	mode: 'development', // development  production
	entry: {
		index: './src/index.js'
	},
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	optimization: { 
		minimize: true,
		minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
	},
	plugins: [
		new HtmlWebpackPlugin({ //html
			template: './src/index.html',
		}),
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[id].css',
		})
	],
	module: {
		rules: [{
				test: /\.(js|jsx)$/,
				use: ["babel-loader"],
				exclude: /node_modules/
			},
			{
				test: /\.css$/i,
				use: [{
					loader: MiniCssExtractPlugin.loader,
					options: {
						esModule: true,
					}
				}, 'css-loader']
			},
			{
				test: /\.ts$/,
				use: 'ts-loader'
			},
			{
				test: /\.less$/,
				use: [{
					loader: MiniCssExtractPlugin.loader,
					options: {
						esModule: true,
					}
				}, 'css-loader', 'less-loader']
			},
			{
				test: /\.(sa|sc)ss$/,
				use: [{
						loader: MiniCssExtractPlugin.loader,
						options: {
							esModule: true,
							hmr: process.env.NODE_ENV === 'development',
						},
					},
					'css-loader',
					'sass-loader',
				],
			},
			{
				test: /.(jpg|png|gif)$/,
				use: 'url-loader?limit=8000'
			}
		]
	},
	devServer: {
		port: 8099,
		historyApiFallback: true,
		hot: true,
		host: 'localhost',
		compress: true,
		open: true
	},
	devtool: 'cheap-module-eval-source-map'
};