基于 Webpack 的环境初步配置
基础配置
1. 输入输出
entry: './src/app.js', // 输入文件
output: {
path: __dirname + '/dist', // 输出目录
filename: 'bundle.js' // 输出文件名称
},
webpack 会复制index.html文件，然后提取出 js 为一个文件。
2. 自动在html中插入js引用
首先安装插件 HtmlWebpackPlugin，它能帮我们在html插入<script type="text/javascript" src="bundle.js"></script>这样一句话，用于自动引用js，其中bundle.js是js 的输出名称。
npm install html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'index.html')
})
]
3. 热重载
我们使用 webpack-dev-server 来实现热重载的功能，首先安装 webpack-dev-server 。
npm install webpack-dev-server
然后在 package.json 文件中的srcipt字段添加以下代码，之后就可以使用 npm start 来启动调试项目了。
"start": "webpack-dev-server --config webpack.config.js"
其中，webpack-dev-server 的默认端口是8080，文件默认地址是 './dist'，默认host是 localhost，如果想要修改，则在 webpack 的配置文件中添加以下配置：
devServer: { // 与entry、output同级
contentBase: './dist',
port: '8080',
host: 'localhost'
},
4. babel 配置
babel 配置用于转移 ES6、ES7的语法。
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread
其中，如果你是用的react，则还需要添加 @babel/preset-react。@babel/preset-env 包含了几乎所有的 ES2015, ES2016, ES2017, ES2018, Modules 的语法。
安装好后，在webpack 配置文件添加以下配置：
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
}
],
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
]
},
如果是react，在 presets 字段中还要添加 @babel/react 字样。
5. JS压缩配置
我们使用 uglifyjs-webpack-plugin 来实现提取后的 JS 文件的压缩。
npm install --save-dev uglifyjs-webpack-plugin
然后在webpack配置文件中添加如下配置：
optimization: {
minimizer: [
new UglifyWebpackPlugin({
parallel: 4 // 表示使用4个线程来对js进行压缩，提交压缩效率。
})
]
}
6. css配置
1. css 加载配置
我们通常使用 style-loader 和 css-loader 来加载 css。
npm install --save-dev style-loader css-loader
然后添加以下配置：
module: {
rules: [
{
test: /\.css/,
use: ['style-loader', 'css-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
}
]
}
style-loader可以在开发环境下用，生产环境请提取压缩；
2. css 提取配置
正常情况下，css 和 js 是一起打包的，但是这会造成js文件多大的情况，所以通常会借助 mini-css-extract-plugin 来提取 css。
npm install --save-dev mini-css-extract-plugin
然后在webpack 配置文件中添加以下配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module: {
rules: [
{
test: /\.css/,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'], // 把原来的 style-loader 改成 { loader: MiniCssExtractPlugin.loader }
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
3. css 文件压缩
我们使用 optimize-css-assets-webpack-plugin 来实现提取后的 JS 文件的压缩。
npm install --save-dev optimize-css-assets-webpack-plugin
然后在webpack配置文件中添加如下配置：
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin()
]
}
4. 为不同浏览器需要加不同的前缀
我们使用 Autoprefixer 来完成这项工作，同时它依赖 Postcss-loader 来实现该功能。
详见 Postcss官网
npm install -D autoprefixer postcss-loader
然后修改webpack配置文件：
module: {
rules: [
{
test: /\.css/,
// 即在use 中加上 'postcss-loader'
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'postcss-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
}
]
},
然后在项目根目录下创建 postcss.config.js 文件，并添加以下内容：
module.exports = {
plugins: [
require('autoprefixer')
]
}
如果不想添加这个文件，也可以全部配置在webpack中，如下：
const autoprefixer = require('autoprefixer')
module: {
rules: [
{
test: /\.css/,
// 即在use 中加上 'postcss-loader'
use: [
{ loader: MiniCssExtractPlugin.loader },
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [autoprefixer()]
}
}
],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
}
]
},
5. css 模块化
使用了 CSS-Module 来实现CSS 的模块化功能。CSS Module 在 css 中使用了类选择器，基本原理是将css 中的样式名称替换成为 json 对照表，然后在js文件中把相应的css 进行替换。
webpack 4 应该是内置了该功能，设置设置 {modules:true} 即可。
module: {
rules: [
{
test: /\.css/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: {
modules: true
}
},
],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
}
]
},
7. 打包前先清空输出目录
npm install --save-dev clean-webpack-plugin
然后在webpack 配置文件中添加以下配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 如果出现 CleanWebpackPlugin is not a constructor 错误，就换成
// const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin()
]
高级配置
高级配置其实就是将配置文件划分为了3个，通常是 webpack.base.js， webpack.dev.js 和 webpack.pron.js。即一个基础配置文件、 一个开发环境下的配置文件和一个生成环境下的配置文件。
按需加载
待续
代码分割
待续
其他
关于SourceMap
现在的 js 都是经过压缩转码，变量名和格式都发生了巨大的变化，一旦出现了问题也很难定位到问题出现的位置。
- 压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。
- 多个文件合并，减少HTTP请求数。
- 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
为解决这个问题，开发人员引入了 Source Map，它记录了代码转换前后对应位置的信息。通过它可以将bug定位到源码中的真实位置。
