webpack5初体验及部分插件使用（二）

初试webpack自定义打包

// 引入node.js中的path
const path = require('path')

module.exports = {
  // 指定入口文件
  entry: './src/index.js',

  // 指定出口
  output:{
    // 指定输出文件的文件名
    filename:'bundle.js',
    // 指定文件的输出路径
    path: path.resolve(__dirname, './dist')
  },

  mode: 'none'
}

在终端运行打包，执行命令行：npx webpack

打包 HTML的插件

下载 html-webpack-plugin 插件：

npm i html-webpack-plugin -D

在webpack.config.js中做如下配置：

// 引入node.js中的path
const path = require('path')
// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 指定入口文件
  entry: './src/index.js',

  // 指定出口
  output:{
    // 指定输出文件的文件名
    filename:'bundle.js',
    // 指定文件的输出路径
    path: path.resolve(__dirname, './dist')
  },

  mode: 'none',

  // 配置插件
  plugins:[
    new HtmlWebpackPlugin({
      // 指定模板
      template:'./index.html',
      // 输出的文件名，可根据自己的需要定义
      filename: 'app.html',
      // 指定在哪里生成script标签
      inject:'body'
    })
  ]
}

如何实现在执行打包命令的时候清除没有用的上一次打包的内容：

 // 指定出口
  output:{
    // 指定输出文件的文件名
    filename:'bundle.js',
    // 指定文件的输出路径
    path: path.resolve(__dirname, './dist'),
    // 配置再次打包时清除上一次打包的无用文件
    clean:true
  },

webpack-dev-server插件

webpack-dev-serve为你提供了一个基本的web server，并且具有live reloading(实时重新加载)功

能，当我们的页面修改刷新以后，浏览器会侦听到我们修改的文件，来实现自动刷新

插件下载：

npm i webpack-dev-server -D

webpack.config.js中配置如下：与entry， output， mode， plugins同级配置

// 实时监听文件修改的配置
  devServer: {
    // devServer指向的物理路径
    static:'./dist'
  }

启动监控：

在终端输入：npx webpack-dev-server

总结：

针对本节内容，在安装html-webpack-plugin插件和wbpack-dev-server插件后，在

webpack.config.js中完整配置如下：

// 引入node.js中的path
const path = require('path')
// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 指定入口文件
  entry: './src/index.js',

  // 指定出口
  output:{
    // 指定输出文件的文件名
    filename:'bundle.js',
    // 指定文件的输出路径
    path: path.resolve(__dirname, './dist'),
    // 配置再次打包时清除上一次打包的无用文件
    clean:true
  },

  // 设置webpack是开发模式
  mode: 'development',

  // 实现精准定位代码的行数
  devtool: 'inline-source-map',

  // 配置插件
  plugins:[
    new HtmlWebpackPlugin({
      // 指定模板
      template:'./index.html',
      // 输出的文件名，可根据自己的需要定义
      filename: 'app.html',
      // 指定在哪里生成script标签
      inject:'body'
    })
  ],

  // 实时监听文件修改的配置，并且网页自动刷新
  devServer: {
    // devServer指向的物理路径
    static:'./dist'
  }

}