webpack基础总结

运行指令

开发环境：webpack ./src/index.js(入口文件) -o ./dist/bundle.js(输出文件) --mode=development 整体打包环境是开发环境
生产环境：webpack ./src/index.js(入口文件) -o ./dist/bundle.js(输出文件) --mode=production 整体打包环境是生产环境

开发环境下的配置

所有依赖包的版本以防版本不兼容而出错

webpack基本配置的框架

创建webpack.config.js的文件在其中进行配置
const {resolve} = require('path')
module.exports = {
    //入口文件
    entry: './src/index.js',
    //输出
    output: {
        //输出文件名
        filename: 'js/built.js',
        //输出路径（绝对路径）
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            //详细loader的配置
        ]
    },
    plugins: [
        //详细插件的配置
    ],
    mode: 'development' //或'production'
}

打包css、less、图片文件的配置

  module: {
        rules: [
            //打包css文件
            {
               test: /\.css$/,
               use: ['style-loader','css-loader']        
            },
            //打包less文件
            {
                test: /\.less/,
                use: ['style-loader','css-loader','less-loader']
               
            },
            //打包样式中的图片 但是不会处理html文件用img标签引入的图片
            //会用到url-loader和file-loader
             {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    //限制图片的大小，小于限制的会被base64处理
                    limit: 45 * 1024
                     //url-loader默认es6模块解析，而html-loader默认commonjs的模块
                     //所以配合以下的html-loader, 要关闭url-loader的es6模块块
                     esModule: false,
                     outputPath: 'imgs' //输出到build文件夹下的imgs文件中url-loader换成file-loader
                }
            },
            //处理html文件用img标签引入的图片
            {
               test:/\.html$/,
               loader: 'html-loader' ,
               options: {
                   name: '[hash:10].[ext]',
                   outputPath: 'media'//输出到build文件夹下的media文件中把html-loader换成file-loader
               }
            }
        ]
    },

html-webpack-plugin的配置

下载插件npm i html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
        //详细插件的配置
        new HtmlWebpackPlugin({
            template: './src/index.html' //在build文件会用一个同名的index.html，并自动引入打包所有的文件。
        })
    ]

打包其他文件的配置

1、下载file-loader
module: {
   rules: [
       //打包除了html,js,样式之外的文件
       {
           exclude: /\.(html|js|css|less|图片)/,
           loader: 'file-loader',
           options: {
              name: '[hash:10].[ext]' 
           }
       } 
   ]
}

devSer的配置

 devServer: {
        contentBase: resolve(__dirname,'build'),
        port: 3000, //端口
        compress: true, //启动gzip压缩
        open:true //自动打开浏览器
    }

提取css文件的配置

npm i mini-css-extract-plugin@1
module: {
   rules: [
       {
           test: /\.css$/,
           use: [
              //style-loader的作用是创建style标签，将样式放入
              //'style-loader' //不需要用，要用MiniCssExtractPlugin.loader来代替
              MiniCssExtractPlugin.loader,
              'css-loader'
            ] 
       }
    ]
 },
plugins: [
   new  MiniCssExtractPlugin({
      filename: 'css/main.css' 
   })
]

webpack打包css和js的浏览器兼容性配置

1、各种依赖包的版本

2、webpack.config.js文件中的配置
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpack = require('optimize-css-assets-webpack-plugin')
 process.env.NODE_ENV = 'development' //配置node位开发环境 默认是生产环境

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module: {
        rules: [
            //js兼容性的配置
            //全部兼容在入口js文件引入 import '@babel/polyfill',文件体积过大
            // {
                //  test: /\.js$/,
                //    exclude: /node_modules/,
                //  loader: 'babel-loader',
                //  options: {
                //     presets: ['@babel/preset-env'] 
                // }
            // }
            //按需兼容 需下载 npm i core-js -D
            {
               test: /\.js$/,
               exclude:/node_modules/,
               loader:'babel-loader',
               options: {
                 presets: [
                    [
                       '@babel/preset-env',
                       {
                         //按需兼容
                          useBuiltIns:'usage',
                          corejs: {
                             version: 3 
                          },
                          //指定兼容浏览器的版本
                          targets:{
                             chrome: '60',
                             firefox: '60'
                             ie: '9',
                             safari: '10',
                             edge: '17'
                          }
                       }
                    ] 
                 ] 
               }
            },
            //css兼容性的配置
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-preset-env')()
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        //压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development'
}
3、css的兼容性配置还需在package.json文件中做以下的配置
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

压缩html和js

1: mode：'production' //会自动压缩js文件
2：html压缩： 
  new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true
            }
        })
3：css文件压缩
 const OptimizeCssAssetsWebpack = require('optimize-css-assets-webpack-plugin')
  plugins: [
    //压缩css
        new OptimizeCssAssetsWebpackPlugin()
  ]

webpack性能优化

1、HMR: hot module replacement 热模块替换
   作用：一个模块发生变化，只会重新打包这一个模块，极大提升构建速度
   样式文件：可以只用HMR功能,style-loader内部实现了该功能
   js文件：默认不能使用。--》 可以修改js代码添加支持HMR的功能的代码
      注意：HMR只能处理非入口文件的js文件
   html文件：不必使用HMR功能。
2、开启HMR功能
 devServer: {
     hot:true //开启HMR
 }
3、在入口js文件中对非入口的js文件进行如下的处理 
if (module.hot) {
  module.hot.accept('非入口文件的路径',function() {
    //方法会见监听该非入口js文件的变化，一旦变化，重新打包该js文件，不会打包其他文件
    //会执行后面的回调函数。 
  }) 
}