webpack 工程師的自我修養：基礎配置

本章提要：

目錄

增加以下文件

<code>│──── config // 配置目錄│ │── babelLoader.js // babel-loader 配置│ │── ForkTsChecker.js // ts 靜態檢查│ │── FriendlyErrorsWebpackPlugin.js // 友好錯誤提示│ └── style│──── src // 開發目錄│ │── style│ │ │── app.css│ │ │── index.less // 測試 less│ │ │── index.scss // 測試 sass│ │ └── index.postcss // 測試 postcss│ └── ts│ └── index.ts // 測試 ts│── babel.js│── postcss.config.js // postcss 配置│── tsconfig.json // ts 配置└──── dist // 打包後的目錄 │── app.bundle.js │── app.css └── index.html/<code>

配置 babel

config/babelLoader.js

<code>module.exports = (config, resolve) => { const baseRule = config.module.rule("js").test(/.js│.tsx?$/); const babelPath = resolve("babel.js"); const babelConf = require(babelPath); const version = require(resolve("node_modules/@babel/core/package.json")) .version; return () => { baseRule .use("babel") .loader(require.resolve("babel-loader")) .options(babelConf({ version })); };};/<code>

使用 babel 配置 ts

這裡我們使用 babel 插件 @babel/preset-typescript 將 ts 轉成 js，並使用 ForkTsCheckerWebpackPlugin、ForkTsCheckerNotifierWebpackPlugin 插件進行錯誤提示。

babel.js

<code>module.exports = function(api) { return { presets: [ [ "@babel/preset-env", { targets: { chrome: 59, edge: 13, firefox: 50, safari: 8 } } ], [ "@babel/preset-typescript", { allExtensions: true } ] ], plugins: [ "@babel/plugin-transform-typescript", "transform-class-properties", "@babel/proposal-object-rest-spread" ] };};/<code>

ts 靜態類型檢查

<code>const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");const ForkTsCheckerNotifierWebpackPlugin = require("fork-ts-checker-notifier-webpack-plugin");module.exports = (config, resolve) => { return () => { config.plugin("ts-fork").use(ForkTsCheckerWebpackPlugin, [ { // 將async設為false，可以阻止Webpack的emit以等待類型檢查器/linter，並向Webpack的編譯添加錯誤。 async: false } ]); // 將TypeScript類型檢查錯誤以彈框提示 // 如果fork-ts-checker-webpack-plugin的async為false時可以不用 // 否則建議使用，以方便發現錯誤 config.plugin("ts-notifier").use(ForkTsCheckerNotifierWebpackPlugin, [ { title: "TypeScript", excludeWarnings: true, skipSuccessful: true } ]); };};/<code>

友好錯誤提示插件

config/FriendlyErrorsWebpackPlugin.js

<code>const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");module.exports = (config, resolve) => { return () => { config.plugin("error").use(FriendlyErrorsWebpackPlugin); };};/<code>

配置樣式，style，css、less、sass、postcss 等

<code>module.exports = (config, resolve) => { const createCSSRule = (lang, test, loader, options = {}) => { const baseRule = config.module.rule(lang).test(test); const normalRule = baseRule.oneOf("normal"); normalRule .use("extract-css-loader") .loader(require("mini-css-extract-plugin").loader) .options({ hmr: process.env.NODE_ENV === "development", publicPath: "/" }); normalRule .use("css-loader") .loader(require.resolve("css-loader")) .options({}); normalRule.use("postcss-loader").loader(require.resolve("postcss-loader")); if (loader) { const rs = require.resolve(loader); normalRule .use(loader) .loader(rs) .options(options); } }; return () => { createCSSRule("css", /\\.css$/, "css-loader", {}); createCSSRule("less", /\\.less$/, "less-loader", {}); createCSSRule("scss", /\\.scss$/, "sass-loader", {}); createCSSRule("postcss", /\\.p(ost)?css$/); };};/<code>

postcss 配置

<code>module.exports = { plugins: { "postcss-px-to-viewport": { unitToConvert: "px", viewportWidth: 750, unitPrecision: 5, propList: ["*"], viewportUnit: "vw", fontViewportUnit: "vw", selectorBlackList: [], minPixelValue: 1, mediaQuery: false, replace: true, exclude: [], landscape: false, landscapeUnit: "vw", landscapeWidth: 568 } }};/<code>

編譯前後 css 對比

src/style/index.less

<code>/* index.less */.test { width: 300px;}/<code>

dist/app.css

<code>/* index.css */.test { width: 36.66667vw; height: 26.66667vw; color: red; background-color: orange;}/* app.css */.test { font-size: 8vw;}/* index.less */.test { width: 40vw;}/* index.scss */.test { height: 40vw;}/* index.postcss */.test { background: green; height: 26.66667vw;}/<code>

配置 autoprefixer

自動添加 css 前綴

postcss.config.js

<code>module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ "> 1%", "last 3 versions", "iOS >= 8", "Android >= 4", "Chrome >= 40" ] } }};/<code>

轉換前

<code>/* index.css */.test { width: 200px; height: 200px; color: red; display: flex; background-color: orange;}/<code>

轉換後

<code>/* index.css */.test { width: 26.66667vw; height: 26.66667vw; color: red; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: orange;}/<code>

開啟 source map

<code>config.devtool("cheap-source-map");/<code>

<code>└── dist │── app.bundle.js │── app.bundle.js.map │── app.css │── app.css.map └── index.html/<code>

在源文件下會有一行註釋，證明開啟了 sourcemap

<code>/*# sourceMappingURL=app.css.map*//<code>