• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

webpack知识分享

 webpack 四大核心概念:

入口(entry) // 打包入口
输出(output) : 打包后输出的位置配置
loader  : loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块
插件(plugins) : 有更强大的功能,比如:打包优化,压缩、代码分割、静态资源处理、环境变量的注入、将所有css的module抽取为单个文件等
1.入口
配置 entry 属性,来指定一个入口起点(单页面)(或多个入口起点(多页面))。默认值为 ./src

//单页面入口 
entry: {
    main: './path/to/my/entry/file.js'
  }
//单页面入口简写 chunk名默认为main
entry:'./src/main.js', 
 
//多页面入口
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
webpack4打包应用过程中的提取公共代码部分。相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件,splitChunksPlugins只能用于如何抽离公用的代码,也就是抽离公用代码的规则

optimization: {    
       splitChunks: {      
              cacheGroups: {       
                     //  打包业务中公共代码
                     common: {
                           name: "common", 
                           chunks: "all",        
                           minSize: 1,      
                           priority: 0
                             },       
                    // 打包node_modules中的依赖库
                    vendor: { 
                             name: "vendor", 
                             test: /[\\/]node_modules[\\/]/, 
                             chunks: "all", 
                             priority: 10
                             }
                          }
                }
  }

2.出口
Output用于配置打包输出的文件,包括输出文件的文件名、输出路径、静态资源地址

output: {
   //文件的输出路径,必须是绝对地址,__dirname 总是指向被执行 js 文件的绝对路径,所以当你在 
   //        /d1/d2/myscript.js 文件中写了 __dirname, 它的值就是 /d1/d2
    path:__dirname + '/build',
    //配置输出文件名,可添加路径配置,可使用占位符,占位符有以下5种:
    //name: chunk名,在该例子中就是app和search
    //hash: 模块标识符的hash值,跟工程内容相关
    //chunkhash: chunk内容的hash值,只和当前chunk内容相关,可用于缓存设置
    //id: 模块标识符 
    //query:模块查询参数,取文件名中?后面的内容
    filename: 'static/js/[name].[chunkhash:8].js',
   //用于设置非entry入口的chunk的输出文件名,非entry入口的chunk一般在动态引入和抽取公共代码或者进 
   //行代码分割等操作
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
  //用于设置打包过程中产生的静态文件的最终引用地址,静态文件的最终引用地址为output.publicPath + 
  //output.filename
    publicPath: ''
 
  }

resolve{
 
   alias: {
            'root': path.resolve(__dirname, '../src'),
            'common': path.resolve(__dirname, '../src/components/common'),
            'action': path.resolve(__dirname, '../src/redux/action'),
            'workbench':path.resolve(__dirname,'../src/components/workbench'),
   'prepareAPath':path.resolve(__dirname,'../src/redux/action/workbench/dataprepare'),
            'updateChart': path.resolve(__dirname, '../src/redux/action/workbench/visualize-component/UpdateChart.action.js'),
        }
}
//使用
import {changeDataSetDefine,fetchDataSetPost} from  'prepareAPath/MainTemplate.action';
 babel-loader
        将ES2015+的代码转码为ES5的代码

 exclude表示不处理的目录,一般node_modules中的第三方js文件不在我们的处理范围内。 

   style-loader
    将css模块以style标签的形式加入到html中

    css-loader
     主要用来解析css中的静态资源,将@import和url()解析为import/require(),解析出的除css以外的静态资源,一般交给url-         loader和file-loader去处理

    sass-loader/less-loader
       将sass/less代码转换为css

       解析一个sass文件,并不只需要一个loader,它需要多个loader串行处理,webpack可以配置多个loader串行处理:

module: {
    rules: [
        {
        test: /\.sass$/,
        use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ]
        }
    ]
}
 use可配置为一个数组,loader从右往左依次执行,且前一个loader的结果是下一个loader的输入。最后一个loader的输出就是我们最终要的结果。一个sass文件首先经过sass-loader处理,变成css文件,又经过postcss-loader处理,添加浏览器前缀等功能,接着交给css-loader去解析css文件引用的静态变量,最后由style-loader以script标签的形式加入到html中。 

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

module: {
    rules: [
        {
    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,就不得不用这个插件了。

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文件的模板
filename: 输出的html文件名,规则和output的filename相同
inject: 是否注入打包的文件,包括js和通过MiniCssExtractPlugin打包输出的css文件,默认为true
minify: 是否压缩
chunks: 只注入某些特定chunk的输出文件,在多文件场景下比较有用
 MiniCssExtractPlugin
MiniCssExtractPlugin将一个chunk中的css抽取为一个单独的css文件,如果chunk中不包含css,则不生成文件。且支持按需加载和sourceMap。webpack4新增插件,在webpack4之前是使用ExtractTextWebpackPlugin来做这件事。官方文档总结了MiniCssExtractPlugin相对ExtractTextWebpackPlugin的四个优势:

按需异步加载
没有重复编译(性能)
使用更简单
专门为css设计
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "static/css/[name].[contenthash:8].css",
chunkFilename: "static/css/[id].[contenthash:8].css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : { // MiniCssExtractPlugin目前还没有HMR功能,所以最好只在生成环境使用
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' // 可单独配置publicPath,默认采用output中的publicPath
}
},
"css-loader"
]
}
]
}
}
CopyWebpackPlugin 
CopyWebpackPlugin用来处理静态文件,可以将文件或者文件夹原封不动地移动到打包目录。

const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
  new CopyWebpackPlugin([
         {
              from: 'public/theme/dark.js', to: 'theme'
          },
        { from: 'source', to: 'dest', toType: 'dir|file|template' }, // 手动设置to的类型,比如设置成dir,即使to设置为a.js,最后也会生成a.js文件夹
        { from: 'source', to: 'dest', context: '/app' }, // 基准目录,from相对于context解析
        { from: 'source', to: 'dest', ignore: ['*.js'] }, // ignore, 忽略匹配的文件
        'source' // 只有from,to默认为output的path
     ], {
         context: '/app', // 同上
         ignore: ['*.js'], // 同上
     })
]
CleanWebpackPlugin 
CleanWebpackPlugin用来清除打包目录,主要用于每次重新生成的时候,清除残留文件。尤其文件有hash值的情况下

const CleanWebpackPlugin = require('clean-webpack-plugin');
const config = {
  plugins: [
    new CleanWebpackPlugin(['dist', 'bulid/*.js'], {
        watch: false, // 是否在--watch(持续增量式监控编译)模式下也清除files然后重新编译,默认 
                      //为false
        exclude: [ 'files', 'svg', 'css' ] // 不删除的子目录和文件
    }),
  ]
DefinePlugin 
DefinePlugin用来定义webpack编译期间的全局变量。我们可以根据这些变量,来做不同的动作。最典型的就是可以区分开发环境和生产环境,比如在开发环境打印各种警告、错误,在生产环境去掉这些跟业务无关的代码。

DefinePlugin的参数是一个对象,键名是一个标识符,或者用.隔开的多级标识符,

new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('production'),
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1'
});DefinePlugin的原理很简单,只是在编译过程中遇到这些定义好的键名,就用键值做简单的文本替换。所以,你如果想给全局变量赋一个字符串,需要这样写'"production"',一般使用JSON.stringify来转一下。 
uglifyjsWebpackPlugin  
 js压缩插件,webpack4 新增了webpack4新增了mode配置。webpack会根据mode值自动做不同的优化

webpack4 只需要在script里面写成 "build": "webpack --mode production", 就自动压缩了

    代码分割
  代码分割可以把代码按照一定的逻辑分割,用来做按需加载或者并行加载,以减少加载时间。在webpack中,主要有以下3中方   式,实现代码分割:

Entry Points: 手动在entry入口配置处配置多个入口
SplitChunks: webpack4默认带这个优化插件,用于抽取不同chunk的公共部分,或者直接代码分割
Dynamic Imports: 动态加载,在函数中使用import()语法,webpack使用SplitChunks将import()加载的module分割为一个单独的chunk,并在函数执行时加载该chunk对应的js文件。
   1.SplitChunks
webpack4打包应用过程中的提取公共代码部分。相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件,splitChunksPlugins只能用于如何抽离公用的代码,也就是抽离公用代码的规则。

splitChunks默认只对按需加载的chunk起作用,会自动将import()引入的module分割为单独chunk,但是需要满足以下条件:

新chunk中的模块被共享或者来自node_modules
新chunk必须大于30kb
按需加载的chunks并行加载的数量要小于等于5
入口文件的并行加载的请求应该小于等于3
在执行后两个原则的时候,体积大的chunk被优先生成。

optimization: {    
       splitChunks: {      
              cacheGroups: {       
                     //  打包业务中公共代码
                     common: {
                           name: "common", 
                           chunks: "all",        
                           minSize: 1,      
                           priority: 0
                             },       
                    // 打包node_modules中的依赖库
                    vendor: { 
                             name: "vendor", 
                             test: /[\\/]node_modules[\\/]/, 
                             chunks: "all", 
                             priority: 10
                             }
                          }
                }
  }
optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000, // chunk只有超过这个大小才会被分割
      maxSize: 0, // 大于这个体积的chunk会被自动分割为更小的chunk
      minChunks: 1, // 一个模块被共享的chunk数量大于minChunks时,才会被分割出来
      maxAsyncRequests: 5, // 按需加载最大的并行数
      maxInitialRequests: 3, // 初始加载最大的并行数
      automaticNameDelimiter: '~', // name为true时,新chunk的文件名由cacheGroups的key加上chunks属性的一些信息生成,automaticNameDelimiter是分隔符
      name: true,
      cacheGroups: {  // 配置拆分规则,会继承splitChunks所有的配置项,所有splitChunks配置项都可以在这里重写覆盖,test、prioprity、reuseExistingChunk是cacheGroups独有的属性
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 模块匹配规则,可以是正则表达式或者函数,不写默认选择所有模块
          priority: -10 // 优先级,当同一个模块同时包含在不同cacheGroup中,该模块将被划分到优先级高的组中
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true  // 如果该chunk包含的modules都已经另一个被分割的chunk中存在,那么直接引用已存在的chunk,不会再重新产生一个
        }
      }
    }
  }

来源:csdn
链接:https://blog.csdn.net/cao_dan/article/details/85703672