创建项目

新建webpack-study文件夹，并使用npm init初始化项目

安装依赖

npm install webpack webpack-cli -D 

构建

   新建src目录，并创建index.js文件，适当写些代码。执行“npx webpack”命令，目录下会多出dist目录，里面存放得是构建后的代码。

配置项

新建webpack.config.js文件，输入以下代码，再执行构建并对比结果。

const path = require('path')

module.exports = {
  mode: 'development', // 指定构建模式

  entry: './src/index.js', // 指定构建入口文件

  output: {
    path: path.resolve(__dirname, 'dist'), // 指定构建生成文件所在路径
    filename: 'index.js', // 指定构建生成的文件名
  }
}

本地开发

安装

npm install webpack-dev-server -D 

配置项目

1. dist目录下新建index.html文件（随便写些东西）
2. wbepack.config.js增加配置：

devServer: {
    static: path.resolve(__dirname, 'dist') // 开发服务器启动路径
  }

注意：小册上的contentBase需修改成static

启动

npx webpack-dev-server