9-2 Webpack（生成HTML、引入CSS、config模式切换）

如何使用 webpack

4.用 webpack 生成 HTML

• 做项目的时候最好是git提交一下，因为有可能做着做着做毁了，没办法撤回
• 官网链接：HTMLWebpack
• 安装：yarn add html-webpack-plugin --dev
• 复制代码到之前的webpack.config.js文件中
  删掉重复的命令，也就多了两句话
  声明放前面，plugins放在module里面即可

const HtmlWebpackPlugin = require('html-webpack-plugin');
{
  plugins: [new HtmlWebpackPlugin()],
}

• 再次运行：yarn build
  自动生成了一个空的HTML文件，里面还自动引入了main.js
  修改package里面的filename，重新运行后HTML文件里的script内容也会跟着改
• 自动修改文件名
  当修改JS中内容后，index.js会重新生成文件名，对应的HTML文件中引入的文件名也会改
• 注意：dist里面所有内容都是生成的，下次打包就不见了，因此不能在里面修改添加内容

4.1 如何往HTML文件中添加内容

• 插件文档
  
• 按照文档提示，将唯一不同的地方放进去
  （plugins插件，记得加花括号）
  title：可以修改生成HTML文档的名字
  filename：上面已经有了输出路径，可以删掉
• 添加HTML模板
  template: 'src/assets/index.html'
  根据路径在src中新建目录assets，然后index.html是我们自己写的HTML文件，webpack会作为生成模板，生成到dist文件中
• 想要保留配置文件中修改的title，则在模板的title处添加
  <%= htmlWebpackPlugin.options.title %>
  
• 复制淘宝的viewport
  注意：修改的东西全部放到模板HTML中，不要放错了

5.用 webpack 引入 CSS

• 可以使用JS生成style
• 也可以把CSS抽成文件
• 使用场景
  1.在开发的时候使用模式一
  2.在build生成的时候用模式二

5.1 配置

• 官方文档
  
• 运行：yarn add css-loader --dev
• 运行之后就可以用import引入CSS文件
• 复制代码进入配置文件
  1.test：如果你的文件名是 .css结尾
  2.use：就使用 style-loader和css-loader
  3.style-loader：安装yarn add style-loader --dev
  4.再次yarn build就成功了
• style-loader和css-loader
  1.css-loader：会把CSS文件内容读到JS里面
  2.style-loader：把css-loader读到的东西变成style标签放到head中

5.2 如何预览CSS

• 在x.js中引入CSS：import './x.css'
• cd dist – http-server . -c-1
  
• 注意：修改文件之后要重新build
  不能在dist目录build，必须要回上一层目录
  cd ..

5.3 使用JS生成style

• 用来代替 http-server
  就不用每次修改都重新打包了
• 官方文档
• 安装：yarn add webpack-dev-server --dev
• 添加配置

  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },

• 在package.json中添加
  "start": "webpack serve --open",
  open：是否帮你打开浏览器，如果不想就删掉
• 运行：yarn start
  1.修改代码后，不需要重新build
  2.不需要在server，保存就刷新
• 注意：它不会重新生成dist目录，只是在内存中搞定

5.4 把CSS抽成文件

• 不想生成style标签，想要变成文件
• 官方文档
• 安装：yarn add mini-css-extract-plugin --dev
• 配置
  这里style和CSS需要二选一，要文件就不要style标签
  
• CSS文件后面没有一串数字，无法做缓存
  上面的filename改成：[name].[contenthash].css

5.5 模式切换

• 生成环境：yarn build
  上线代码
• 开发环境：yarn start
  
• 创建两个confige文件
  1.默认的文件用来开发：使用style-loader（因为快不需要生成文件）
  2.生成文件用webpack.config.prod.js：使用生成CSS文件的（因为需要做缓存）
• 如何选择两个文件
  1.在package.json中修改
  "build": "rm -rf dist && webpack --config webpack.config.prod.js",
  在build的时候不使用默认配置，而是新写的配置
  2.在webpack.config.prod.js中修改
  上面的mode改为：production

5.6 继承的思想

• 两个confige文件只有一行不一样，使用继承的思想
• 创建：webpack.config.base.js文件
  复制两个confige的共有属性
• 抄属性：...base,
• 生成环境config.prod
  只有三处不同
  1.mode
  2.多一个提取CSS的插件
  3.CSS的use：没有style
• 开发环境
  大部分都是继承
  1.dev开头的两个属性
  2.use有不同，含有style-loader
• base文件
  1.入口
  2.输出
  3.HTML插件
• 运行命令
  1.yarn start：开发环境，style标签
  2.yarn build：生成环境，link标签