webpack 4.0 小记
介紹
其實之前也會看一些 webpack 腳手架的配置，但是使用的插件實在是太多了，不了解各個插件的左右是一個很大的瓶頸，所以著手認識認識各大插件。
項目地址，之前一直都是用腳手架工具，最近得閑就學習了花褲衩大佬的手摸手系列，自己按著實現一下，順便記錄一下知識點。
項目使用 yarn,之前用主要使用 cnpm，但是總是會有些漏包的問題，所以之后改用了 yarn，個人確實覺得 yarn 在國內來說更友好。
項目結構
開始
webpack 相關插件介紹
其他的具體配置看源碼就好了，我在這里主要介紹一下相關的幾個插件(基于 webpack 4.0)
webpack-cli | webpack | webpack-dev-server | webpack-merge
webpack 4.0 需要安裝 webpack-cli
yarn add --dev webpack-cli webpack webpack-dev-server webpack-merge 復制代碼webpack-cli // webpack 腳手架，包含了很多內置方法(例如：--compress， --color) webpack-dev-server // 配置開發環境服務 webpack-merge // 用于合并 webpack 公共配置，縮減代碼量，使代碼更清晰 復制代碼webpack-dev-server
devServer:{contentBase: false,//我這里沒有設置contentBase，個人研究contentBase必須指向存在的bundle.js文件所在目錄，//因為這里是開發模式，所以dist目錄并不存在，所以用false.host:' localhost',port: '8888',inline:true,//webpack官方推薦watchOptions: {aggregateTimeout: 2000,//瀏覽器延遲多少秒更新poll: 1000//每秒檢查一次變動},compress: true,//一切服務都啟用gzip 壓縮historyApiFallback: true,//找不到頁面默認跳index.htmlhot: true,//啟動熱更新，必須搭配new webpack.HotModuleReplacementPlugin()插件open: true, } 復制代碼webpack-dev-server 其他配置項以及在 package.json 中的快捷實用
webpack(?.base).js 中使用
devServer 還有以下屬性
// 在所有響應中添加首部內容 headers: {"X-Custom-Foo": "bar" }復制代碼// 默認情況下，dev-server 通過 HTTP 提供服務。也可以選擇帶有 HTTPS 的 HTTP/2 提供服務 https: true // 以上設置使用了自簽名證書，但是你可以提供自己的：https: {key: fs.readFileSync("/path/to/server.key"),cert: fs.readFileSync("/path/to/server.crt"),ca: fs.readFileSync("/path/to/ca.pem") } 復制代碼// 當存在編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋。默認情況下禁用。如果只想顯示編譯器錯誤： overlay: true // 如果您想顯示警告和錯誤： overlay: {warnings: true,errors: true } 復制代碼如果你不想始終傳遞 /api，則需要重寫路徑：proxy: {"/api": {target: "http://localhost:3000",pathRewrite: {"^/api" : ""}}} 復制代碼package.json 中使用以下都是 webpack-dev-server --xxxx 模式
--allowed-hosts // host 白名單
--color // CLI only 控制臺信息顏色
--compress // CLI only 一切服務都啟用gzip 壓縮
--inline // 默認為 true， false 為 iframe 模式。 在 dev-server 的兩種不同模式之間切換。默認情況下，應用程序啟用內聯模式(inline mode)。這意味著一段處理實時重載的腳本被插入到你的包(bundle)中，并且構建消息將會出現在瀏覽器控制臺。也可以使用iframe 模式，它在通知欄下面使用標簽，包含了關于構建的消息。切換到iframe 模式：
--open // 自動打開瀏覽器 --open 'Google Chrome': 自動打開谷歌瀏覽器
--openPage // 自動打開的頁面路徑 如 webpack-dev-server --open-page "/different/page"
--progress // 將運行進度輸出到控制臺
webpack-html-plugin
yarn add --dev html-webpack-plugin@next 復制代碼// webpack.xxx.jsconst HtmlWebpackPlugin = require('html-webpack-plugin') ... ... // plugin中需要引入配置 new HtmlWebpackPlugin({template: 'index.html',filename: 'index.html',inject: true,favicon: resolve('favicon.ico'),title: 'webpack demo',minify: { // 壓縮 HTML 的配置minifyCSS: true, // 壓縮 HTML 中出現的 CSS 代碼minifyJS: true, // 壓縮 HTML 中出現的 JS 代碼removeComments: true, // 移除注釋collapseWhitespace: true, // 縮去空格removeAttributeQuotes: true // 移除屬性引號} })復制代碼index.html 中使用 plugin 配置的變量
// index.html <!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title><%= htmlWebpackPlugin.options.title %></title> </head> <body><div id="app"></div> </body> </html> 復制代碼copy-webpack-plugin
作用：在webpack中拷貝文件和文件夾, 打包的時候需要配置使用
// webpack.prod.js const CopyWebpackPlugin = require('copy-webpack-plugin')plugins: [new CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: path.resolve(__dirname, '../dist/static'),ignore: ['.*']}]) ] 復制代碼mini-css-extract-plugin 配置
此插件將CSS提取到單獨的文件中。它為每個包含CSS的JS文件創建一個CSS文件。它支持CSS和SourceMaps的按需加載。它建立在新的webpack v4功能（模塊類型）之上，并且需要webpack 4才能工作。
yarn add --dev mini-css-extract-plugin 復制代碼// 生產環境壓縮需要使用 optimize-css-assets-webpack-plugin 配合使用const TerserJSPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = {optimization: {minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],},plugins: [new MiniCssExtractPlugin({filename: '[name].css',chunkFilename: '[id].css',}),],module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],}, }; 復制代碼babel-loader
webpack 配置 babel 需要安裝 babel-core、babel-preset-env、babel-loader、 babel-plugin-transform-runtime
babel-core：是babel的核心編譯器
babel-preset-env： 是一個配置文件，可以根據此配置文件讓目標瀏覽器或者運行環境來自動將ES2015+的代碼轉換為es5，得以向下兼容
babel-loader： webpack 插件，預處理文件
babel-plugin-transform-runtime： 禁用了 babel 自動對每個文件的 runtime 注入，而是引入 babel-plugin-transform-runtime 并且使所有輔助代碼從這里引用。
yarn add --dev babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime 復制代碼babel-loader^8.0.0 安裝的 babel-core 以及 babel-preset-env 和以前不同， 具體使用詳見 babel-loader，
以上插件需要用以下的替換
"@babel/core": "^7.4.5", "@babel/plugin-transform-runtime": "^7.4.4", "@babel/preset-env": "^7.4.5", "@babel/runtime": "^7.4.5", 復制代碼// webpack.config.jsmodule: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']，plugins: ['@babel/transform-runtime']}}}]} 復制代碼在 .babelrc 中添加插件
// .babelrc{ "plugins": ["@babel/plugin-transform-runtime"] }復制代碼eslint
eslint 主要用于檢查語法錯誤，配合 prettier，vscode 配置插件，可以統一代碼風格 需要安裝 eslint、eslint-loader、babel-eslint、eslint-config-standard、eslint-friendly-formatter
yarn add --dev eslint eslint-loader babel-eslint eslint-config-standard eslint-friendly-formatter 復制代碼babel-eslint： 解析器 eslint-config-standard： 官方推薦標準配置 eslint-friendly-formatter： 使 eslint 報錯的更友好 eslint-plugin-vue： vue相關配置
這里使 eslint-config-standard，還需要安裝一下插件
yarn add --dev eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise 復制代碼// .eslintrc.jsmodule.exports = {root: true, parserOptions: {parser: 'babel-eslint',sourceType: 'module'},env: {browser: true,node: true,es6: true},extends: "eslint: standard", // 引用 擴展規則rules: {"indent": ["error", 2],"quotes": ["error", "double"],"semi": ["error", "always"],"no-console": "error","arrow-parens": 0} }復制代碼《未完待續...》
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的webpack 4.0 小记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 回调地狱解决方案之Promise
- 下一篇： 图像像素灰度内插(Matlab实现)