1. 目录结构:
webpack-demo.png
2. webpack 基本配置（打包）
npm install webpack webpack-cli -D 安装 webpack 和 webpack-cli
新建 webpack.config.js ，配置如下：
const path = require('path') // nodejs自带的path模块
module.exports = {
mode: 'development', // 模式，可选 development 或 production
entry: path.join(__dirname, 'src', 'index.js'), // 入口文件，当前目录下的src目录的index.js
output: { // 出口
filename: 'bundle.js',
path: path.join(__dirname,'dist')
}
}
path.join(__dirname) 拼凑路径，以正确的路径分割符拼接字符串路径
__dirname（两个下划线）动态获取当前文件夹的绝对路径
package.json 添加 script 如下：
"scripts": {
"build": "webpack"
},
可指定webpack配置文件，如 "build": "webpack --config webpack.config.js"
由于我的配置文件名使用默认的webpack.config.js，故直接 webpack 即可
执行 npm run build，根据配置自动打包生成 dist目录和bundle.js
3. webpack 配置插件
npm install html-webpack-plugin -D 解析html的插件
npm install webpack-dev-server -D 启动服务的插件
修改 webpack.config.js，添加 plugins 数组 和 devServer 对象，如下：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: path.join(__dirname, 'src', 'index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname,'dist')
},
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'), // 模板
filename: 'myindex.html'
// 实际上是将src目录下的index.html作为模板，引入bundle.js，产生新的文件 myindex.html（位于dist路径下）
// 浏览器访问，localhost:3000/myindex.html
})
],
devServer: {
port: 3000, // 端口
contentBase: path.join(__dirname, 'dist') // 目录
}
}
package.json 添加 script 如下：
"dev": "webpack-dev-server"
同理，由于我使用默认配置文件名，故直接webpack-dev-server
执行 npm run dev ，浏览器打开 localhost:3000/myindex.html 即可
4. babel
npm install @babel/core @babel/preset-env babel-loader
@babel 表示 babel组（整个babel）
@babel/core 是babel的核心
@babel/preset-env 是babel的配置集合
babel-loader 是给webpack使用的loader
补充：使用 babel-loader做转译，但实际上，真正负责转译的是@babel/core
根目录新建 .babelrc，配置如下：
{ "presets": ["@babel/preset-env"] }
修改 webpack.config.js，添加 module 对象如下：
...
output: {},
module: {
rules: [
{
test: /\.js$/, // 检测以.js结尾的文件
loader: ['babel-loader'], // 使用 babel-loader
include: path.join(__dirname, 'src'), // 检测路径为src
exclude: /node_modules/ // 忽略node_modules路径
}
]
},
plugins:[],
...
src/index.js 中，我使用了es6 的 const 和 箭头函数
const sum = (a, b) => { return a + b }
打包转译后如下：
const 转为 var
箭头函数 转为 普通function（class也会转成function）
babel-demo.png
5. 配置生产环境（生产环境代码会进行压缩，体积相对较小）
根目录新建 webpack.prod.js，将 webpack.config.js 的内容拷贝进去并修改如下：
1）将 mode 改为 "production"
2）删除 devServer（放到线上，没必要用本地服务了）
3）output 的 filename 改为 "bundle.[contenthash].js"，contenthash是一串乱码，作为版本识别，被打包的 src/index.js 代码不变，则 contenthash 不变
4）package.json 中，"build" 改为 "webpack --config webpack.prod.js"
5）删除原有的dist目录（防止旧文件干扰），重新 npm run build
网友评论