webpack(4)--module

Module

module的配置如何處理模塊。css

配置Loader

rules 配置模塊的讀取和解析規則, 一般用來配置loader, 其類型是一個數組, 數組裏每一項都描述瞭如何去處理部分文件。node

配置一項rules大體經過如下方式:jquery

1. 條件匹配: 經過test、include、exclude三個配置來命中Loader要應用的規則文件。 2. 應用規則: 對選中後的文件經過use配置項來應用loader,能夠應用一個loader或者按照從後往前的順序應用一組loader。同時還能夠分別給loader傳入參數。 3. 重置順序: 一組loader的執行順序默認是從有道左執行,經過exforce選項能夠讓其中一個loader的執行順序放到最前或者是最後。

例子:webpack

module: { rules: [ { test: /\.js$/, use: ['babel-loader?cacheDirectory'], include: path.resolve(__dirname, 'src') }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: path.resolve(__dirname, 'node_modules') } ] }

在loader須要傳入不少參數的時候,咱們還能夠經過一個object來描述,如:web

use: [ { loader: 'babel-loader', options: { cacheDirectory: true }, // enforce:'post' 的含義是把該 Loader 的執行順序放到最後 // enforce 的值還能夠是 pre,表明把 Loader 的執行順序放到最前面 enforce:'post' } ]

上面例子中 test、include、exclude這三種命中文件的配置項只傳入一個字符串或者是正則,其實他們還支持數組類型數組

{
    test: [/\.jsx?$/, /\.tsx?$/], include: [ path.resolve(__dirname, 'src'), path.resolve(__dirname, 'test') ], exclude: [ path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'bower_modules') ] }

noParse

noParse能夠讓webpack忽略對部分沒有采用模塊化的文件的遞歸解析和處理,這樣作的好處是能提升構建性能。緣由是一些庫例如jq這些,龐大又沒有采用模塊化標準,讓webpack去解析是沒有意義的。
noParse是可選配置下,類型是:RegExp, [RegExp], function其中一個。sass

noParse: /jquery|chartjs/ noParse: (content) => { //content表明一個模塊的文件路徑 //返回true of false return /jquery|chartjs/.test(content) } 

parser

由於webpack是以模塊化的JavaScript文件爲入口,因此內置了對模塊化JavaScript的解析功能。支持AMD、Commonjs、SystemJs、ES6。parse屬性能夠更細粒度的配置哪些模塊語法要解析,哪些不解析。和noParse的區別在於parser能夠精確道語法層面上。noParse只能控制哪些文件不進行解析。babel

 
module: {  rules: [ {  test: /\.js$/,  use: ['babel-loader'],  parser: {  amd: false, // 禁用 AMD  commonjs: false, // 禁用 CommonJS  system: false, // 禁用 SystemJS  harmony: false, // 禁用 ES6 import/export  requireInclude: false, // 禁用 require.include  requireEnsure: false, // 禁用 require.ensure  requireContext: false, // 禁用 require.context  browserify: false, // 禁用 browserify  requireJs: false, // 禁用 requirejs } }, ] }
本站公眾號
   歡迎關注本站公眾號,獲取更多信息