[JavaScript知识库]2.webpack-提高开发效率的相关配置

# html文件自动引入资源文件

我们需要使用HtmlWebpackPlugin这个插件

安装插件

npm install --save-dev html-webpack-plugin

添加plugins配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件

module.exports = {
  plugins: [
    // 实例化HtmlWebpackPlugin插件并传入配置对象
    new HtmlWebpackPlugin({
      template: './index.html', // 指定模板
      filename: 'app.html', // 输出的文件名
      inject: 'body' // 将资源在哪里引入,可以在head和body两个选项中选择
    })
  ]
}

# 自动清理上一次打包的dist目录

添加一个配置项即可

module.exports = {
  clean: true // 开启清理上次打包残留
}

# 开启开发模式

添加一个配置项即可

module.exports = {
  mode: 'development' // 将打包模式更改为开发模式
}

# 开发模式下追踪代码

添加一个配置项即可

module.exports = {
  devtool:'inline-source-map', // 在开发模式下追踪代码
}

# 开启监测代码更改自动重新编译

打包时命令加上--watch即可

npx webpack --watch

# 实时加载环境

安装

npm install --save-dev webpack-dev-server

配置

我们需要告知它检测哪个目录,添加配置

module.exports = {
  devServer: {
    static: './dist' // 监听的静态目录,相当于此配置文件与输出路径的相对路径
  }
}

使用

配置完成后我们再次打包就需要使用webpack-dev-server这个命令了,如下

npx webpack-dev-server

启动成功后我们会发现每次打包后都会自动刷新网页,美滋滋~

本文完