webpack-输入输出和插件配置

一： 输入和输出配置以及模式配置

图例文件

(1): webpack.config.js配置

 // webpack是基于node,所以使用module.exports
const path = require("path")
module.exports = {
  // 入口 出口 loader plugin
  entry: './src/index.js',
  mode: 'development', // 指定模式，默认是生产模式，开发模式便于查看代码
  output: {
    path: path.resolve(__dirname,"dist"), // __dirname 代表的是根目录  M:\47-webpack-study\01-webpack\dist
    filename: 'index.js', // 指定输出的文件名
  }
}

(2): mode为生产模式(developement)

(3): mode为开发模式(production) 默认的

二： html模板配置

（1）下载html-webpack-plugin插件

 yarn add -D html-webpack-plugin
 // webpack是基于node,所以使用module.exports
const path = require("path")

let HtmlWebpackPlugin = require("html-webpack-plugin") // 生成html模板
module.exports = {
  // 入口 出口 loader plugin
  entry: './src/index.js',
  mode: 'production', // 指定模式，默认是生产模式，开发模式便于查看代码
  output: {
    path: path.resolve(__dirname,"dist"), // __dirname 代表的是根目录  M:\47-webpack-study\01-webpack\dist
    filename: 'index.js', // 指定输出的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板
    })
  ]
}

效果图如下

指定输出的html文件名

   plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板
      filename: 'main.html', // 指定输出的文件名
    })
  ]

我们看到输出为main.html文件，可是为什么还会有index.html文件呢，我们不想要每次打包保留上次的残留文件，改怎么做呢，下边我们看下怎么清除上次打包后的残留文件

三 清除webpack每次打包后的残留文件

（1）clean-webpack-plugin

 yarn add -D clean-webpack-plugin
 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次打包前,清除dist
 plugins: [
    ...,
    // clean-webpack-plugin
    new CleanWebpackPlugin() // 使用这个插件在每次生成dist目录前，先删除dist目录
  ]

效果如下,我们发现只有一个main.html文件了

四： webapck-dev-server (启动服务,注意，devServer只在development环境下有效)

• 每次打包都需要npx webpack这种的，我们想要像vue或者react那样使用yarn server
  启动命令，就需要webpack-dev-server的配置了
  (1) : 下载webpack-dev-server ( yarn add -D webpack-dev-server)
  (2) : package.json文件配置scripts

     "scripts": {
        "serve": "webpack serve"
      },
  

(3) webpack.config.js中webpack-dev-server配置

  // webpack-dev-server配置
  devServer: {
    host: 'localhost', // 主机
    port: '9527', // 端口
    open: true, // 自动打开
    historyApiFallback:true,//找不到页面默认跳index.html
    compress:true,//一切服务都启用gzip 压缩
    // hot:true,//启动热更新，必须搭配new webpack.HotModuleReplacementPlugin()插件
    proxy: { // 代理配置
      "/api": {
        target: 'http:localhost:5000',
        changeOrigin: true
      }
    }
  },

五：这次学习插件的完整代码

// webpack是基于node,所以使用module.exports
const path = require("path")

let HtmlWebpackPlugin = require("html-webpack-plugin") // 生成html模板

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次打包前,清除dist

const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin') // 热更新
module.exports = {
  // 入口配置
  entry: './src/index.js',
  // 模式配置
  mode: 'development', // 指定模式，默认是生产模式，开发模式便于查看代码
  // 出口配置
  output: {
    path: path.resolve(__dirname,"dist"), // __dirname 代表的是根目录  M:\47-webpack-study\01-webpack\dist
    filename: 'index.js', // 指定输出的文件名
  },
  // webpack-dev-server配置
  devServer: {
    host: 'localhost', // 主机
    port: '9527', // 端口
    open: true, // 自动打开
    historyApiFallback:true,//找不到页面默认跳index.html
    compress:true,//一切服务都启用gzip 压缩
    hot:true,//启动热更新
    proxy: { // 代理配置
      "/api": {
        target: 'http:localhost:5000',
        changeOrigin: true
      }
    }
  },
  // 插件配置
  plugins: [
     // html-webpack-plugin
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板
      filename: 'index.html', // 指定输出的文件名
    }),
    new HtmlWebpackPlugin({ // 多模板
      template: './src/index.html', // 指定模板
      filename: 'main.html', // 指定输出的文件名
    }),
    // clean-webpack-plugin
    new CleanWebpackPlugin(), // 使用这个插件在每次生成dist目录前，先删除dist目录
    // 热更新插件配置
    new HotModuleReplacementPlugin()  //使用webpack自带的HMR插件

  ]
}

六：package.json下下载的插件版本