webpack使用记录
开发环境记录
全局安装命令:npm install --global webpack
项目中安装:npm install webpack webpack-cli --save-dev
Package.json中设置"private": true,
防止意外发布代码
安装生产环境安装包使用npm install --save
开发环境使用npm install --save-dev
配置文件 webpack.config.js
压缩cssnpm install --save-dev style-loader css-loader
压缩图片 npm install --save-dev file-loader
更新html的引入的文件名 npm install --save-dev html-webpack-plugin
清除dist文件 npm install clean-webpack-plugin --save-dev
开启web服务器 npm install --save-dev webpack-dev-server
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(),
//官方实例传值无限报错因为新版原因无需传值就是删除output下的文件
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname,'dist')
},
//检查报错来源
devtool: 'inline-source-map',
//动态刷新页面开启服务器
devServer: {
contentBase: './dist',
port: 3000
},
//压缩输出去除未使用内容
mode: "production"
//按需加载
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}
}
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
Package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
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
为了更容易地追踪错误和警告,JavaScript 提供了source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js
,source map 就会明确的告诉你
生产环境搭建
配置文件
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
2
3
4
安装cnpm install --save-dev webpack-merge
代码压缩插件安装cnpm i uglifyjs-webpack-plugin -s
配置package.json
- "start": "webpack-dev-server --open",
+ "start": "webpack-dev-server --open --config webpack.dev.js",
- "build": "webpack"
+ "build": "webpack --config webpack.prod.js"
2
3
4
source map 替换
开发中为inline-source-map
+ devtool: 'source-map',
plugins: [
- new UglifyJSPlugin()
+ new UglifyJSPlugin({
+ sourceMap: true
+ })
2
3
4
5
6
避免在生产中使用 inline-***
和 eval-***
,因为它们可以增加 bundle 大小,并降低整体性能
代码分离-防止重复[CommonsChunkPlugin]
将公共依赖提取到已有入口chunk或者生成新的chunk,去除重复模块
const webpack = require('webpack');
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
- })
+ }),
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'common' // 指定公共 bundle 的名称。
+ })
],
2
3
4
5
6
7
8
9
10
11
← knex.js NO.1 你好,世界! →