先将项目建成 npm 项目
npm init -y
npm i webpack -D
npm I webpack-cli
创建目录结构，文件和内容
创建 webpack.config.js
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘main.js’,
path: path.resolve(__dirname, ‘dist’)
}
};
在命令行执行
npx webpack –config webpack.config.js
在 packjson scripts 中可以简写
“build”: “npx webpack –config webpack.config.js”
loader
module
非 js 模块的导入需要 loader
css 模块需要 css-loader style-loader
多入口 对应多出口
const path = require(‘path’);
module.exports = {
entry: {
app: ‘./src/index.js’,
print: ‘./src/print.js’
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
}
};
设置 HtmlWebpackPlugin
npm install –save-dev html-webpack-plugin
HtmlWebpackPlugin 还是会默认生成它自己的 index.html 文件。也就是说，它会用新生成的 index.html 文件，替换我们的原有文件。
HtmlWebpackPlugin
有可能频繁的修改入口文件或出口文件，导致 html 文件 引入的文件发生改变 ，要频繁修改
自动新建 html 自动引入文件， 可以提供一个 html 模板
new HtmlWebpackPlugin({
template:”./public/index.html”
})
清理 dist 文件夹 clean-webpack-plugin
在每次构建前清理 /dist 文件夹，这样只会生成用到的文件
npm install –save-dev clean-webpack-plugin
开发环境
使用 source map
先将 mode 设置为 ‘development’,
当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置
为了更容易地追踪 error 和 warning，JavaScript 提供了 source map 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你
选择开发工具
开发环境推荐使用 eval eval-source-map
devtool :”eval-source-map”
使用 watch mode(观察模式)
package.json
你可以指示 webpack “watch” 依赖图中所有文件的更改。如果其中一个文件被更新，代码将被重新编译，所以你不必再去手动运行整个构建。
我们添加一个用于启动 webpack watch mode 的 npm scripts：
“watch”: “webpack –watch”,
在命令行中运行 npm run watch
使用 webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能
npm install –save-dev webpack-dev-server
webpack.config.js
devServer: {
contentBase: ‘./dist’
},
以上配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下
添加一个可以直接运行 dev server 的 script：
package.json
“start”: “webpack-dev-server –open”,
模块热替换
局部更新
启用HMR
HMR 不适用于生产环境，这意味着它应当用于开发环境
new webpack.HotModuleReplacementPlugin()
