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

Posted 程序媛慧慧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack基本打包配置及打包静态资源相关的知识,希望对你有一定的参考价值。

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.生产环境性能优化

①优化打包构建速度

②优化代码运行性能



以上是关于Webpack基本打包配置及打包静态资源的主要内容,如果未能解决你的问题,请参考以下文章

webpack编译打包基本配置

webpack基本使用

webpack基本配置

webpack使用入门及常用配置总结

webpack打包原理

webpack4.0在Mac下的安装配置及踩到的坑