-
创建一个文件夹作为项目的根目录，打开cmd（最好是已管理员的身份运行，避免出现读写权限的问题）。
进入项目根目录，运行以下几行命令：npm init -y npm install webpack --save-dev npm install webpack-cli --save-dev -
创建目录和文件：/src 指的是source，我们编辑代码的地方；/dist 指的是 distribution，是放置压缩和优化后的代码，并最终显示在浏览器上。
目录视图 -
修改package.json，增加private属性，删除main。这是为了防止你的代码被意外发布。
图例 -
index.html 中引入 main.js
图示 -
在根目录创建 webpack.config.js
图示
将下面的代码贴进去：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
-
在package.json中加入
"build": "webpack"
图示 -
cmd 中运行
npm run build，main.js 就生成啦!
成功
配置 webpack-dev-server，使用热替换
- 安装
npm install --save-dev webpack-dev-server - 修改 webpack.config.js
module.exports = {
devServer: {
contentBase: './dist'
}
}
- 在package.json scripts 添加 start
"start": "webpack-dev-server --open"
- 启用 HMR，打开webpack.config.js，devServer 增加
hot: true， 增加 plugins 部分
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
mode: 'production'
};
- cmd 中运行
npm start就可以了。现在修改代码可以直接在浏览器中看到了，无需再次手动编译。
