Webpack基本打包配置及打包静态资源

Posted 2021-07-05 程序媛慧慧

1.打包css、html、图片资源     开发环境

//resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
//用于打包html资源   为构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');

moudle.exports = {
  //webpack配置
  //入口起点
  entry:'./src/index.js',
  //输出
  output:{
    //输出文件名
    filename:'built.js',
    //输出路径
    //_dirname node.js的变量，代表当前文件的目录绝对路径
  },
  //loader的配置   例如打包样式资源
  moudle:{
    rules:[
        //详细loader配置
        //不同文件必须配置不同loader
       {
         //匹配哪些文件
         test:/\.css$/,
         //使用哪些loader进行处理 执行顺序：从右到左、从下到上
         use:[
            //创建style标签，将js中的样式资源添加到head中生效
            'style-loader',
            //将css文件变成commonjs模块加入到js中，里面内容是样式字符串。
            'css-loader'
         ]
       },
        {
            test:/\.less$/,
            use:[
                'style-loader',
                'css-loader',
                //将less文件编译成css文件   需要下载less-loader和less
                'less-loader'
            ]
        },
        //处理图片资源 处理css中的图片   但默认处理不了html中引入的图片
        {
            test:/\.(jpg|png|gif)$/,
            //使用一个loader   需下载url-loader file-loader
            loader:'url-loader',    一个用loader   多个可以用use
            options:{
                //根据情况配置
                //当发现图片大小小于8kb,就会被base64处理
                //base64优点：减少请求数量，减轻服务器压力
                //缺点：图片体积会更大（文件请求速度更慢）
                limit:8*1024,
//问题：url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                //解析时就会出问题，[object Module]
                //解决：关闭url-loader的es6模块化，使用commonjs解析
                esMoudle:false
            }
        },
        {
            test:/\.html$/,
            //处理html文件的imd图片(负责引入imd,从而能被url-loader进行处理)
            loader：'html-loader'     //解析会报错   原因如上
        }
    ]
  },  
  //plugins的配置 例如打包html资源
  plugins:[
    //详细plugins的配置 
    //html-webpack-plugin
    new HtmlWebpackPlugin({
        //复制'./src/index.html'文件，并自动引入打包输出的所有资源（js/css)
        template:'./src/index.html'
    })  
  ],
  //模式
  mode = 'development'
  //mode = 'production'
}

2.打包其他资源，字体图标等

const { resolve } require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
moudle.export={
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(_dirname,'build')
    },
    moudle:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //打包其他资源（除css/js/html资源以外的其他资源
            {
                //排除css/js/html资源
                exclude:/\.(css|js|html)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
           template:'./src/index.html'
        }) 
    ],
    mode = 'development'
}

3.devServer

开发服务器devServer:用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出   启动指令为：npx webpack-dev-server

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

4.提取css为单独文件        生产环境

①使用插件   new MiniCssExtractPlugin()     提取js中的css为单独文件

②使用MiniCssExtractPlugin.loader    此时可去掉style-loader

{
    test:/\.css$/,
    use:[
        //创建style标签，将js中的样式资源添加到head中生效
        //'style-loader',
        //这个loader取代style-loader。作用：提取js中的css为单独文件
         MiniCssExtractPlugin.loader,
        //将css文件编译到js文件中
        'css-loader',
        //css兼容性处理:postcss--->postcss-loader   postcss-perset-env
        //帮postcss找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
        //设置开发环境 node环境变量   process.env.NODE_ENV = 'development';
        //例如         "browserslist":{           基本兼容全部浏览器
                           "development":[
                               "last 1 chrome version",
                               "last 1 firefox version",
                               "last 1 safari version",
                            ],   
          //默认看是生产环境
                            "production":[
                                ">0.2%",
                                "not dead",
                                "not op_mini all"
                            ]
                        }
        //使用loader的默认配置
        //'postcss-loader'   
        //修改loader的配置
        {
            loader:'postcss-loader',
            options:{
                ident:'postcss',
                plugins:() => [
                    //postcss的插件
                    require('postcss-perset-env')
                ]
            }
        }
    ]    
}
.......
plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
        //对输出的css文件进行重命名
        filename:'css/built.css'
    })
]

5.压缩css     用插件   optimize-css-assets-webpack-plugin

const OptimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
plugins:[
  .......
  //压缩css
  new OptimizeCssAssetsWebpackPlugin()
]

6.js语法检查eslint   以及js兼容性处理eslint

moudle:{
    rules:[
        /*语法检查：elsint-loader eslint
       注意：只检查自己写的源代码 第三方库是不用检查的
       设置检查规则：package.json中的eslintConfig中设置~*
       arbnb --> eslint-config-airbnb-base   eslint-plugin-import   eslint*/
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            options:{}
        },
        /*js兼容性处理(将es6以上的语法转化为es6以下的) babel-loader @babel/core        
           1.只能转换基本语法 @babel/presets-env  
           2.转换全部语法   全部js兼容性处理 --> @babel/polyfill(只需在js中引入) 
             缺点：将所有对兼容性代码的处理全部引进来了 增加了代码的体积
           3.需要做兼容性处理的就做：按需加载 ---》 core-js */
        {
          test:/\.js$/,
          exclude:/node_modules/,  
          loader:'babel-loader',
          options:{
              //提示babel做怎样的兼容性处理
              presets:[
                  '@babel/presets-env',
                  {
                      //按需加载
                      useBuiltIns:'usage',
                      //指定corejs版本
                      corejs:{
                          version:3
                      },
                      //指定兼容性做到哪个版本的浏览器
                      targets:{
                          chrome:'60',
                          firefox:'60',
                          ie:'9',
                          ......
                      }
                  }
              ]
          }  
        }    
    ]
}
package.json中
"eslintConfig":{
    "extend":"airbnb-base"   //继承airbnb-base规则检查
}

7.html和js的压缩

//生产环境下会自动压缩代码，不需要管
//压缩html
plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html',
        minify:{
            //移除空格
            collapsewhitespace:true,
            //移除注释
            removeComments:true
        }
    }),
]

8.性能优化

1.开发环境性能优化

①优化打包构建速度

②优化代码调试

2.生产环境性能优化

①优化打包构建速度

②优化代码运行性能