webpack学习4：热模替换、devtool、准备生产环境、清除打包文件目录

热模替换功能

• 之前的webpack-dev-server是全部刷新，热模替换是局部刷新；
• 详细配置见官网：指南 -> 模块热替换
• 修改devServer配置

  devServer: {
    contentBase: resolve(__dirname, 'build'), // 运行项目的目录
    open: true, // 自动打开浏览器
    compress: true, // 启动gzip压缩
    port: 3000, // 端口号
    hot: true // 开启热模替换功能 HMR
  }
  

• 问题：html文件无法自动更新了，需要增加一个入口

    entry: ['./src/js/index.js','./src/index.html']
  

devtool

• 概述： 一种将压缩/编译文件中的代码映射回源文件中的原始位置的技术，让我们调试代码不在困难（即编译后如果代码出问题，直接映射回源代码的位置，让我们能更好的调试）
• 详细配置见官网：配置 -> devtool
• 介绍
  • cheap 只保留行, 编译速度快
  • eval webpack生成的代码（每个模块彼此分开，并使用模块名称进行注释）, 编译速度快
  • inline 以base64方式将source-map嵌入到代码中，缺点造成编译后代码体积很大
• 推荐使用：
  • 开发环境： cheap-module-eval-source-map
  • 生产环境： cheap-module-source-map

以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。

准备生产环境

• 创建文件夹config，将webpack.config.js复制两份
  • ./config/webpack.dev.js
  • ./config/webpack.prod.js
• 修改webpack.prod.js配置，删除webpack-dev-server配置

  // / 代表根路径(等价于这个：http://localhost:5000/)，以后项目上线所有路径都以当前网址为根路径出发
  module.exports = {
    output: {
      path: resolve(__dirname, '../build'), // 文件输出目录
      filename: './js/built.js', // 文件输出名称
      publicPath: '/'  // 所有输出资源在引入时的公共路径，若loader中也指定了publicPath，会以loader的为准。
    },
    module: {
      rules: [
    	{
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 8192, 
              outputPath: 'images', 
              publicPath: '/images',  // 重写publicPath，需要在路径前面加上 /
              name: '[hash:8].[ext]' 
            }
          }
        },	
      ]
    },
    mode: 'production',  //修改为生产环境
    devtool: 'cheap-module-source-map' // 修改为生产环境的错误提示
    // 删除devServer
  }
  

• 修改package.json的指令
  • “start”: “webpack-dev-server --config ./config/webpack.dev.js”
  • “dev”: “webpack-dev-server --config ./config/webpack.dev.js”
  • “build”: “webpack --config ./config/webpack.prod.js”
• 开发环境指令
  • npm start
  • npm run dev
• 生产环境指令
  • npm run build
  • 注意: 生产环境代码需要部署到服务器上才能运行 （serve这个库能帮助我们快速搭建一个静态资源服务器）
    • npm i serve -g
    • serve -s build -p 5000

清除打包文件目录

• 概述：每次打包生成了文件，都需要手动删除，引入插件帮助我们自动删除上一次的文件
• 安装插件
  • npm install clean-webpack-plugin --save-dev
• 引入插件
  • const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’); // 注意要解构赋值！！！
• 配置插件
  • new CleanWebpackPlugin() // 自动清除output.path目录下的文件
• 运行指令：npm run build