webpack的基本配置

如何实现热更新

webpack-dev-server实现热更新(HMR)
安装webpack-dev-server

npm install webpack-dev-serve --save-dev

配置webpack.config.js文件

const webpack=require('webpack');//引入webpack
    entry:__dirname+'/src/main.js',
    output:{
        publicPath:'/dist',//必须加publicPath
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    devServer:{
        host:'localhost',
        port:'8080',
        open:true//自动拉起浏览器
        hot:true,//热加载
        //hotOnly:true
    },
    plugins:[
    //热更新插件
        new webpack.HotModuleReplacementPlugin()
    ]

如果只需要触发HMR，可以再加个参数hotOnly:true,这时候只有热更新，禁用了自动刷新功能。
如果需要自动刷新就不需要设置热更新。

热更新必须有以下5点：

• 1.引入webpack
• 2.output里加publicPath
• 3.devServer中增加hot:true
• 4.devServer中增加hotOnly:true
• 5.在plugins中配置 new webpack.HotModuleReplacementPlugin()

用 Babel 7 转译 Javascript ES6

安装依赖

npm i babel-core babel-loader babel-preset-env --save-dev

创建名为 .babelrc 的新文件来配置babel
.babelrc代码

{
    "presets": [
        "env"
    ]
}

配置babel-loader ：在 webpack.config.js 文件中的module.exports 写入代码

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }

以上步骤就实现了转码ES6。

webpack打包CSS模块

webpack打包CSS模块需要使用 loader去解析它们。
安装依赖

npm i mini-css-extract-plugin css-loader style-loader --save-dev

css-loader: 解析css文件并且支持@import()等引入css模块
style-loader: 通过插入 style 标签将CSS添加到DOM中
mini-css-extract-plugin: 此插件将CSS提取到单独的文件中

webpack配置代码

module.exports = {
     ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
         },
         {
           test: /\.css$/,
           use: [
             MixiCssExtractPlugin.loader,
             'css-loader'
            ]
         }
       ],
       plugins: [
	       new MixiCssExtractPlugin({
	         filename: "[name].css",
	         chunkFilename: "[id].css"
	       })
       ]
     }
   }

处理sass文件

安装sass sass-loader

npm i sass sass-loader --save-dev

webpack配置如下

module.exports = {
     ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
         },
         {
           test: /\.css$/,
           use: [
             MixiCssExtractPlugin.loader,
             'css-loader',
             // 新加以下代码
             'sass-loader'
            ]
         }
       ],
       plugins: [
	       new MixiCssExtractPlugin({
	         filename: "[name].css",
	         chunkFilename: "[id].css"
	       })
       ]
     }
   }

优化压缩CSS文件和JS文件
安装

npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin --save-dev

optimize-css-assets-webpack-plugin: 用于优化\最小化CSS资产的Webpack插件
uglifyjs-webpack-plugin: 用于优化 js资产的 Webpack插件

webpack新增配置：

const OptimizeCssAddetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    mode: 'production',
    optimization: {
        minimizer: [
            new UglifyjsWebpackPlugin({
                test: /\.js(\?.*)?$/i,
                cache: true,
                parallel: true, // 并行化可以显著加速构建，因此强烈建议设置为 true
                sourceMap: true, // 使用源映射,将错误信息位置映射到模版
            }),
            // 使用压缩css插件之前,一定要使用 uglifyjs-webpack-plugin插件对js代码进行压缩
            new OptimizeCssAddetsWebpackPlugin({}),
        ]
    }
  }

script-loader
该loader使对应的js文件在全局环境中运行一次。比如我们在工程中使用了 jquery 的插件，需要全局暴露$,我们就需要让jquery文件在全局环境中运行，以便让它把$挂载到全局变量中,效果和在浏览器中加script标签一样。

import 'jquery';

module: {
    rules: [
        {
        test: /jquery$/,
        use: [ 'script-loader' ]
        }
    ]
}

Files Loaders
url-loader 和 file-loader 是一对用来处理图片、svg、视频、字体等静态资源文件的loader。一般体积比较小的资源交给 url-loader 处理，编码为base64字符串，直接嵌入js文件中。体积较大的文件由file-loader处理，直接释放为了一个输出文件。

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: 'img/[name].[hash:7].[ext]'
    }
},

一般只配置 url-loader 即可，在资源超过limit的时候， url-loader 会将资源自动交给 file-loader 处理，并将options内容也传递给file-loader。

HtmlWebpackPlugin
HtmlWebpackPlugin插件可以用来生成包含你所有打包文件（js和css）的html文件，特别是你在打包文件名配置了hash，就不得不用这个插件了。

module.exports = {
  plugins: [
      new HtmlWebpackPlugin({
          template: path.resolve(__dirname, 'src/index.html'),  
          filename: 'static/index.[hash].html',  
          inject: true, 
          minify: false, 
          chunks: ['app', 'vendor'] 
      })
  ]
};

• template: HtmlWebpackPlugin生成html文件的模板，如果简单的话可以直接通过其他配置项生成，不必单独提供一个html文件模板，详情可参考 HtmlWebpackPlugin
• filename: 输出的html文件名，规则和output的filename相同
• inject: 是否注入打包的文件，包括js和通过MiniCssExtractPlugin打包输出的css文件，默认为true
  minify: 是否压缩
• chunks: 只注入某些特定chunk的输出文件，在多文件场景下比较有用

大部分插件看[这篇文章]或者去官网(https://www.codercto.com/a/18825.html)