webpack的官网：https://webpack.js.org/

    1. 创建文件命令行：

      1. mkdir webpack-demo
      2. cd webpack-demo
      3. npm init -y
      4. npm install webpack webpack-cli --save-dev//yarn add webpack webpack-cli
      5. npx webpack //自动检测webpack路径,运行，但是安装路径如果出现空格npx不可用

    2. 删除之前的保留的文件，重新打包

      1. //package.json文件
      2. "script":{
      3.  "build": "rm -rf dist && webpack",
      4. }
      5. //然后打包的时候执行yarn build

    3. 设置webpack

      1. var HtmlWebpackPlugin = require('html-webpack-plugin')
      2. var path = require('path')
      3. module.exports = {
      4.  //消除mode警告
      5. mode: 'development',//developmeot（开发者模式）有注释，但体积大，production（用户模式）体积小，代码最小化
      6. entry: './foo.js',//入口文件名
      7. output: {
      8.  path: path.resolve(__dirname, 'dist'),//生成文件夹名
      9.  filename: 'foo.bundle.js'//生成的.js文件名
      10.  filename: '[name].[contenthash]'.js//名字.js，http缓存
      11. },
      12. //产生一个index.html
      13. plugins: [new HtmlWebpackPlugin(
      14. title: //html的title名
      15. template: 'src/assets/test.html'//可以写的HTML，test.html里面的title改成<%= htmlWebpackPlugin.options.title %>就可以引用上面的title名
      16. )],
      17. module: {
      18.  rules: [
      19.    {
      20.      test: /\.css$/,
      21.      use: ['style-loader', 'css-loader'],
      22.    },
      23.  ],
      24. },
      25. };

    4. http缓存

      1. 首页不缓存，因为缓存就不知道哪个地方更新了；
      2. webpack打包后会有hash后缀，用于浏览器对比更新；
      3. 设置缓存头（Cache-Control）就设置了缓存保留多长时间，可以保留一些.js.css文件用于超快下载浏览

    5. 生成html

      1. yarn add html-webpack-plugin --dev

    6. 生成css

      1. //添加两个依赖
      2. yarn add css-loader --dev
      3. yarn add style-loader --dev
      4. //然后写的.css文件就可以被编译
      5. import '名字.css'//引用css

    7. webpack dev serve

      1. //webpack.config.json
      2.  devtool: 'inline-source-map'