### webpack的幾個核心概念 1. `Entry`：模塊解析的入口文件； 2. `Module`：webpack中一切皆模塊，一個模塊對應一個文件； 3. `Chunk`：代碼塊，一個chunk由多個模塊組成，用于代碼的合并與分割； 4. `Loader`：模塊轉換器，用于將模塊的原內容轉成新的內容； 5. `Plugin`：擴展插件，在webpack構建的特定流程中注入擴展的邏輯，來改變構建的結果； 6. `Output`：輸出結果 ### `ValidationError: CSS Loader Invalid Options` 解決辦法： 去掉`minimize`這個屬性,這個屬性已經被取消了。 ### css加載器 `style-loader`的作用是將css字符串提取出來，并加載到style標簽下 `extract-text-webpack-plugin`插件：將js中的文件提取到單獨的文件中,webpack4.0被mini-css-extract-plugin取代， ```js { test: /\.css$/, use: ['style-loader', 'css-loader'] // loader的加載順序是從后往前 } ``` ### `webpack-dev-server` `webpack-dev-server`：提供HTTP服務，需配合`webpack-cli`使用 【注】：`devServer`會將webpack構建的文件放到內存中，所以要達到熱更新實現實時預覽的效果，需要將`index.html`中對文件的引用的相對路徑去掉。 ``` // package.json "start:dev": "webpack-dev-server --hot" ``` ### `context` webpack在尋找相對路徑的文件時，會以context為根目錄。 context默認為執行webpack時所在的當前工作目錄，如果想修改可以： ```js module.exports={ // 必須為絕對路徑 context:path.resolve(__dirname,'xxxx') } ``` ### `entry`的類型 ```js // 三種類型，字符串，數組，對象 module.exports={ entry:'./app.js' entry:['./a.js','./b.js'] entry:{a:'./a.js',b:['./b.js']} } ``` ### `output.publicPath` 配置靜態資源的URL前綴，可用于CDN前綴的配置 ### `Loader` 1. 條件匹配：test，include，exclude 2. 應用規則：use，默認從后往前的執行順序 3. 重置順序：使用enforce 示例： ```js { module:{ rules:[{ test:/\.js$/, use:['bable-loader'], // 只命中src目錄下的js文件 include:path.resolve(__dirname,'src') },{ test:/\.scss$/, use:['style-loader,css-loader,scss-loader,'], // 排除node_modules下的scss文件 exclude.resolve(__dirname,'node_modules')， // pre:從前往后，post從后往前 enforce:'post' }] } } // 另一種寫法 { module:{ rules:[{ test:/\.js$/, use:[{ loader:'babel-loader', options:{ //配置項 cacheDirectory:true }， }] }] } } // include,exculde也可以傳入數組，彼此之間的關系為或 ``` ### `resolve` ```js { resolve:{ alias:{ // 設置別名 components:path.resolve(__dirname,'./src'), // 支持正則匹配只命中react結尾的模塊 'rect$':'xxxxxx' }, // 在require或import語句中沒有帶后綴的,webpack會根據配置自動帶上后綴去訪問文件 entensions:['.json','.js','.ts'], // 配置webpack尋找第三方模塊的目錄,默認是node_modules // 也可以加入自定義的模塊目錄,簡化導入的路徑,這個少用點,可能會跟node_modules沖突,用別名好了 modules:['./src/components','node_modules'] } } ``` ### `externals` > 作用是告訴webpack在Javascript的運行環境中已經內置了哪些全局變量，不再直接打包到chunk中； ```js { externals:{ // 將導入語句中的jquery替換成運行環境里的全局變量jQuery jquery:'jQuery' } } ``` ### 全局配置 ```js // 全局配置 module.exports = { // entry表示入口，Webpack執行構建的第一步從Entry開始,可抽象成輸入 // 類型可以是string,object,array extry:'./app.entry', entry:['./app/entry1','./app/entry2'], entry:{ a:'./app/entry-a' b:['./app/entry-b1','./app/entry-b2'] }, // output 定義webpack的輸出方式 output:{ path:path.resolve(__dirname,'dist'), // 必須是string類型的絕對路徑 // 輸入文件的名稱 filename:'bundle.js', //完整的名稱 filename:'[name].js', // 名稱模板，多個entry filename:'[chunkhash].js', // 根據文件內容個Hash值生成文件名稱，用于瀏覽器的長時間緩存 // 所有資源的URL前綴,為string類型 publicPath:'/assets/', publicPath:'', //根目錄 publicPath:'https://cdn.example.com/', // 放到CDN // 導出庫的名稱,為string類型,不填默認輸出為匿名函數 library:'MyLibrary', libraryTarget:'umd', // 默認為var,可以是umd umd2 commonjs amd this var assign window global jsonp pathinfo:true, // boolean類型，是否包含有用的文件路徑信息到生成的代碼里 chunFilename:'[id].js', chunkFIlename:'[chunkhash].js', sourceMapFilename:'[file].map' }, module:{ rules:[ { test:'/\.jsx$/', include:[ path.resolve(__dirname,'app') ], exculde:[ path.resolve(__dirname,'app/demos') ], use:[ 'style-loader', { loader:'css-loader', options:{} } ] } ], noParse:[ // 不要解析和處理模塊 /special-library\.js$/ // 用正則匹配 ] }， plugins:[ // 配置插件 ], // resolve 配置尋找模塊的規則 resolve:{ modules:['node_modules',path.resolve(__dirname,'app')], // 默認以node_modules為根目錄 extensions:['.js','.json','.jsx','.css'], // 模塊的后綴名 alias:{ 'components':'../../src/components', }, enforceExtension:false, // 是否強制導入語句寫明文件后綴 }, // 輸出文件的性能檢查配置 preformance:{ hints:'warning', // 有性能問題時輸出警告 hints:'error', hints:false, // 關閉性能檢查 maxAssetsSize:20000, // 最大的文件大小，單位Bytes maxEntrypointSize:40000, // 最大入口文件的大小 assetFilter:function(assetFileName){ return assetFileName.endsWith('.css') || assetFileName.endsWith('.js') } }, devtool:'source-map', // 配置source-map類型 context:__dirname, // webpack使用的根目錄，string類型必須是絕對路徑 // 配置輸出代碼的運行環境 target:'web', // 瀏覽器，默認,其他值web-worker,node,async-node,node-webkit,electron-main,electron-renderer externals:{ jquery:'jQuery' }, // 控制臺輸出日志控制 stats:{ assets:true, colors:true, errors:true, errorDetails:true, hash:true }, devServer:{ proxy:{ '/api':"http://api.example.com" }, contentBase:path.join(__dirname,'public'), // HTTP服務器的文件根目錄 compress:true, // 是否開啟GZIP壓縮 histroyApiFallback:true, hot:true, // 開啟模塊熱替換 https:false, }, // 是否捕捉webpack構建的性能信息，用于分析是什么原因導致的構建性能不佳 profile:true, // 是否使用緩存來提升構建速度 cache:false, watch:true， watchOptions:{ // 監聽模式選項 ignored:/node_modules/, aggregateTimeout:300, // 監聽到變化后，等300ms在執行動作，截流，防止文件更新太快導致頻繁的編譯 poll:1000 // 輪詢系統指定的文件是否發生變化，默認每秒1000次 } } ```