webpack

webpack是前端项目工程化的具体解决方案（打包更方便）

1. 安装webpack：

npm install -S webpack
npm install -S webpack-cli

2. 创建配置文件

在项目根目录中，创建名为webpack.config.js 的配置文件，并初始化内容如下：

module.exports = {
    mode : 'development'  // mode 用来指定构建模式，可选值有 development 和 production
}

3. 创建dev启动脚本

在package.json 的 scripts节点下，新增dev脚本

"scripts" : {
      "dev" : "webpack"  // scripts节点下的脚本，可以通过npm run 执行，例如npm run dev
}

4.在终端下运行 npm run dev，启动 webpack 进行项目的打包构建

5. 修改默认的出口、入口约定

默认的导报入口文件为 src -> index.js
默认的输出文件路径为 dist -> main.js

注意：可以在webpack.config.js中修改打包的默认约定，如下图： 修改出入口

6.设置热部署 webpack-dev-server

• npm install webpack-dev-server -D
• 修改package.json -> scripts中得dev命令如下如： 设置启动命令
• 重新运行即可
• 注：webpack-dev-server会启动一个试试打包的http服务器。默认将打包后bundle.js的放到内存里了

7. 安装html-webpack-plugin