配置webpack

1. 创建一个文件夹作为项目的根目录，打开cmd（最好是已管理员的身份运行，避免出现读写权限的问题）。
   进入项目根目录，运行以下几行命令：

    npm init -y
    npm install webpack --save-dev
    npm install webpack-cli --save-dev
   

2. 创建目录和文件：/src 指的是source，我们编辑代码的地方；/dist 指的是 distribution，是放置压缩和优化后的代码，并最终显示在浏览器上。

   
   
   目录视图

3. 修改package.json，增加private属性，删除main。这是为了防止你的代码被意外发布。

   
   
   图例

4. index.html 中引入 main.js

   
   
   图示

5. 在根目录创建 webpack.config.js

   
   
   图示
   
   

   将下面的代码贴进去：

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
   filename: 'main.js',
   path: path.resolve(__dirname, 'dist')
 }
};

6. 在package.json中加入 "build": "webpack"
   

   图示

7. cmd 中运行 npm run build，main.js 就生成啦!
   

   成功

配置 webpack-dev-server，使用热替换

1. 安装
   npm install --save-dev webpack-dev-server
2. 修改 webpack.config.js

module.exports = {
    devServer: {
        contentBase: './dist'
    }
}

3. 在package.json scripts 添加 start

"start": "webpack-dev-server --open"

4. 启用 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'
};

5. cmd 中运行 npm start就可以了。现在修改代码可以直接在浏览器中看到了，无需再次手动编译。