資訊專欄INFORMATION COLUMN
摘要：當(dāng)一個文件要被多個處理，那么一定要指定執(zhí)行的先后順序先執(zhí)行在執(zhí)行參考
webpack系列文章：
我們在寫loader的時候，rules里面有非常非常多的loader規(guī)則，但是每個文件只能匹配一個 loader，被一個 loader 處理，因此可以使用 oneOf 唯一匹配，不需要每個文件把所有的 loader 都詢問一遍，這樣可以提高 loader 的執(zhí)行效率
webpack.config.js寫法配置如下:
const { resolve } = require("path");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");// 定義nodejs環(huán)境變量：決定使用browserslist的哪個環(huán)境process.env.NODE_ENV = "production";// 復(fù)用loaderconst commonCssLoader = [ MiniCssExtractPlugin.loader, "css-loader", { // 還需要在package.json中定義browserslist loader: "postcss-loader", options: { ident: "postcss", plugins: () => [require("postcss-preset-env")()] } }];module.exports = { entry: "./src/js/index.js", output: { filename: "js/built.js", path: resolve(__dirname, "build") }, module: { rules: [ { // 在package.json中eslintConfig --> airbnb test: //.js$/, exclude: /node_modules/, // 優(yōu)先執(zhí)行 enforce: "pre",//正常的，一個文件只能被一個loader處理，當(dāng)一個文件要被多個loader處理， //一定要指定loader執(zhí)行的先后順序，先執(zhí)行eslint再執(zhí)行babel loader: "eslint-loader", options: { fix: true } }, { // 以下loader只會匹配一個 // 注意：不能有兩個配置處理同一種類型文件,所以eslint-loader放在oneOf匹配之前執(zhí)行 oneOf: [ { test: //.css$/, use: [...commonCssLoader] }, { test: //.less$/, use: [...commonCssLoader, "less-loader"] }, /* 正常來講，一個文件只能被一個loader處理。 當(dāng)一個文件要被多個loader處理，那么一定要指定loader執(zhí)行的先后順序： 先執(zhí)行eslint 在執(zhí)行babel */ { test: //.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", corejs: {version: 3}, targets: { chrome: "60", firefox: "50" } } ] ] } }, { test: //.(jpg|png|gif)/, loader: "url-loader", options: { limit: 8 * 1024, name: "[hash:10].[ext]", outputPath: "imgs", esModule: false } }, { test: //.html$/, loader: "html-loader" }, { exclude: //.(js|css|less|html|jpg|png|gif)/, loader: "file-loader", options: { outputPath: "media" } } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: "css/built.css" }), new OptimizeCssAssetsWebpackPlugin(), new HtmlWebpackPlugin({ template: "./src/index.html", minify: { collapseWhitespace: true, removeComments: true } }) ], mode: "production"};文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/118890.html
摘要：插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量等。插件的使用一般是在的配置信息選項中指定。到這里基本配置已經(jīng)告一段落了，所有配置我已經(jīng)放在倉庫中第二期優(yōu)化教程已出歡迎關(guān)注和提問 1、了解Webpack相關(guān) 什么是webpack Webpack是一個模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/js...
摘要：最佳實踐一個文件一個組件。，這是包含的是無副作用的純函數(shù)式計算狀態(tài)操作的函數(shù)。，的啟動腳本，啟動開發(fā)模式，項目打包，運行單元測試等等。每次代碼推送到之前也會執(zhí)行所有單元測試用例，全部通過才可以繼續(xù)推送。，首次安裝依賴包之后生成的文件。 前段時間 React license 的問題鬧的沸沸揚揚，搞得 React 社區(qū)人心惶惶，好在最終 React 團(tuán)隊聽取了社區(qū)意見把 license 換...
摘要：對于前端開發(fā)者來說，無論使用還是還是，打包工具的配置永遠(yuǎn)都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。所以自己就動手嘗試配置一下。 對于前端開發(fā)者來說，無論使用vue 還是react還是angular，打包工具的配置永遠(yuǎn)都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。 由于之前的項目一直都是在使用vue，對于vue的webpa...
摘要：對于前端開發(fā)者來說，無論使用還是還是，打包工具的配置永遠(yuǎn)都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。所以自己就動手嘗試配置一下。 對于前端開發(fā)者來說，無論使用vue 還是react還是angular，打包工具的配置永遠(yuǎn)都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。 由于之前的項目一直都是在使用vue，對于vue的webpa...
閱讀 1976·2021-11-24 09:38
閱讀 3339·2021-11-22 12:07
閱讀 1903·2021-09-22 16:03
閱讀 1956·2021-09-02 15:41
閱讀 2617·2021-07-24 23:28
閱讀 2211·2019-08-29 13:17
閱讀 1547·2019-08-29 12:25
閱讀 2666·2019-08-29 11:10
