webpack4 的開發環境配置說明

webpack4 的開發環境配置說明

完整的webpack4的配置clone地址： https://github.com/ziwei3749/...

開發環境的搭建，整體而言就比較輕鬆，由於用戶就是開發者們。

你不須要考慮 hash 是否穩定、代碼提取是否正常。

只要你本身可以開發、而且以爲開發體驗 ok，那麼你這個配置就是靠譜的。

這篇文章主要是以我本身搭建 vue + webpack 的開發爲例子，記錄本身從 0 搭建時的思路和遇到的坑。

因此可能不會對於配置的細節，作太詳細的說明

那麼，重點說明的是思路和一些注意點

• 1.從 0 搭建一個項目的思路
• 2.搭建過程當中我遇到的坑，給你們分享一下。

下面是咱們要配置的功能，也會體現從 0 搭建項目的思路和注意點。

• 1.處理 vue 文件
• 2.使用 devServer

• 3.處理靜態資源的插件和 loader

  • 3.1 處理 css/css 預處理器
  • 3.2 處理圖片路徑
  • 3.3 處理 ES6 語法
  • 3.4 postcss 自動添加 css 前綴
  • 3.5 在 vue 裏開啓 css module
• 4.指定 devtool

• 5.代碼規範約束配置

  • .eslint
  • .editorconfig
  • pre-commit
• 6.resolve 別名設置
• 7.webpack 日誌儀表盤 webpack-dashboard

一.處理 vue 文件

從零搭建，就是從空文件夾開始嘛。那麼首先

mkdir webpack4-project

cd webpack4-project

npm init

初始化項目後，下一步作什麼呢？

想一想，咱們既然要配置 vue webpack 的前端開發環境

那確定要下載 webpack 、vue 吧，瀏覽器沒法處理 vue 文件，那確定須要 vue-loader 吧

不用擔憂本身作的對不對，反正作錯了，終端確定會告訴你了，因此必定要本身動手

npm i webpack vue vue-loader --save-dev

• 1.注意：安裝 vue-loader 後，會提示你 vue-loader 依賴 css-loader 和 vue-template-compiler

npm i css-loader vue-template-compiler --save-dev

下載以後，就能夠去寫 webpack 配置了。

• 2.注意：若是你直接在終端輸入 webpack，會提示你安裝 webpack-cli。
• 3.注意：安裝後嘗試直接在項目裏寫 vue 文件，會提示你須要 loader 來處理。因而去配置 vue-loader
• 4.注意： 因此咱們在 webpack.config.js 裏 module 裏配置，而後提示你須要 css-loader 和 VueLoaderPlugin

{
                test: /\.vue$/,
                use: 'vue-loader'
            }

按照要求配置 css-loader ；
VueLoaderPlugin 是 vue-loader 內置的插件，直接在 plugins 配置就好 (這個是 vue-loader@15 的變化)

可是沒有 devServer，目前咱們還看不到效果，接下來是開發服務器配置

二.使用 devServer

使用 devServer 須要安裝 webpack-dev-server

安裝後，就能夠去配置 devServer，devServer 能夠有不少參數，

可是目前能夠不用關注。由於 webpack4 是有默認配置的。

• 1.注意： 這裏涉及到環境變量的區分。

由於一個項目在開發和生產環境下，有不一樣的需求。因此天然要有一個變量用來區分環境。

webpack3 的作法是在 package.json 的 script 字段配置 NODE_ENV

相似這樣

"scripts": {
    "build": "NODE_ENV=production webpack --config webpack.config.js",
    "dev": "NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },

這樣配置後，

當運行 npm run dev 時，在 webpack.config.js 裏經過 process.env.NODE_ENV 能夠取到值 development

以 process.env.NODE_ENV 來作 if 判斷就能夠啦。

那麼 webpack4 中，依舊能夠這樣作。也能夠經過 mode 來指定環境。也是設置 process.env.NODE_ENV 的值

webpack3 中通常會設置 DefinePlugin，可是 webpack4 自動幫你設置該插件

它可讓其餘第三方類庫或者你本身的 vue 代碼中取到 process.env.NODE_ENV,在業務中判斷環境。

new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"' // 由於這個插件直接執行文本替換，給定的值必須包含字符串自己內的實際引號
      }
    }),

• 2.注意: devServer 經常使用配置項

devServer: {
    host: '0.0.0.0',   // IP地址
    port: 8888,        // 端口號
    hot: true,          // 開啓熱更新
    overlay: true,      // 開啓報錯提示顯示在瀏覽器遮罩層
    historyApiFallback: true   // 設置vue-router的模式是histroy
  },

其中熱更新在 webpack3 中須要配置插件，webpack4 依舊能夠這樣寫。可是已是默認配置了。

plugins: [new webpack.HotModuleReplacementPlugin()];

如今運行 npm run dev 已經能夠跑起來服務，可是沒有 index.html

• 3.注意: 安裝 html-webpack-plugin,指定 template 後，才能在開發服務器上能夠看到本身的代碼效果了
• 4.注意：區分 npm run dev 運行時的 webpack 和終端裏直接輸出 webpack 的區別

前者是項目本地的 webpack,後者是全局的 webpack

3、處理靜態資源的插件和 loader

3.1 處理 css/css 預處理器

• 1.注意：處理 css，須要 style-loader 和 css-loader

style-loader:將css以style標籤的形式插入到html中
css-loader: 能在js引入css依靠的就是css-loader解析

• 2.注意：css 預處理器，以 stylus 爲例子，須要安裝 stylus 和 stylus-loader

配置時，注意 style-loader css-loader stylus-loader 的順序

webpack 的解析順序是從右向左的。

3.2 處理圖片路徑

處理圖片須要 url-loader，而 url-loader 依賴 file-loader，因此都須要下載

另外 url-loader 還能夠處理字體、視頻文件

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,    // 小於10000kb自動轉base64
              name: 'static/images/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/images/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/images/[name].[hash:7].[ext]'
        }
      },

3.3 處理 ES6 語法

處理es6的語法，須要babel

• 1.注意 npm 升級後，不少包的命名方式已經變動。相似於@babel/core，@babel/preset-env 這種
• 2.注意：能夠經過 exclude 來設置不用編譯 ES6 的文件。一般 node_modules 的依賴包都不須要編譯處理。
• 3.注意：babel-preset-env 、 babel-polyfill、babel-transform-runtime-plugin的區別

babel-preset-env

babel-preset-env: 能夠babel須要兼容哪些瀏覽器。好比全部瀏覽器的最後2個版本。
babel-preset-env 是依據 Can i use 和 browserslist 來判斷某一個 JS 語法是否須要用 babel 編譯


可是babel-preset-env只能編譯ES6中JS的語法，沒法編譯ES6中的api

好比let / const 會被編譯 爲var 

可是Array.include() Array.from() new Set()沒法被編譯

babel-polyfill和babel-transform-runtime-plugin

babel-polyfill是全局墊片，目的是提供一個完整的ES6環境，用於app，會污染全局變量，體積更大

babel-transform-runtime-plugin是局部墊片，主要用於開發庫，不會污染全局變量，體積更小。

結論就是通常作業務開發就 babel-preset-env + babel-polyfill 就能夠。

文檔資料

實踐過程當中，查閱過的文檔留在這裏。若是 API 忘記或者變化了，方便查閱。
https://babeljs.io/

關於@babel/preset-env的一篇文章，解釋useBuiltIns的三個選項
https://www.jianshu.com/p/0dc...

3.4 postcss 自動添加 css 前綴

安裝postcss-loader / autoprefixer

配置loader後，還須要建立postcss.config.js做爲配置文件

module: {
    rules: [
      {
        test: /\.styl(us)?$/,
        loader: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'stylus-loader'
        ]
      }
    ]
  },

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

3.5 在 vue 裏開啓 css module

參考vue-loader@15就能夠
https://vue-loader.vuejs.org/...

簡單說就是在css-loader裏增長一個配置項 module:true

這裏要注意，若是你是有的vue文件用css module，有的不用的話。

須要參考文檔中的【可選用法】，用oneOf來配置

4、指定 devtool

若是不指定devtool，你會發現代碼調試起來十分不便，出錯的行數也看不出來。

devtool: 'cheap-module-eval-source-map', // webpack4在開發階段能夠不寫devtool

devtool的配置我沒詳細研究，我是開發階段用cheap-module-eval-source-map，生產階段去掉devtool

5、代碼規範約束配置

slint的配置,我用的stardard風格的，

官方文檔地址 ： https://github.com/standard/e...

須要依賴比較多的插件

npm i --save-dev eslint

npm install --save-dev eslint-config-standard eslint-plugin-standard 
eslint-plugin-promise eslint-plugin-import eslint-plugin-node

配置eslint可能遇到的問題：

• vue沒法被eslint識別，配置plugin:['html']
• 但願用eslint-loader檢查vue文件，可是又不能只用eslint-loader解析vue，能夠設置enforce:'pre'。這樣在處理.vue以前，先用eslint-loader預處理
• 記得用exclude: /node_modules/.關閉對第三方庫代碼風格的檢查
• eslint不少報錯的話，能夠配置命令一次性修正
• 還能夠經過一個包husky保證在git commit時，eslint報錯的狀況下沒法提交，從而保證提交到git倉庫上代碼的規範性。

"scripts": {
    "lint": "eslint --ext .js --ext .vue src/ build",
    "lint-fix": "eslint --fix --ext .js --ext .vue src/ build",
    "precommit": "npm run lint"
  },

分享一下.editorconfi的配置,用來統一編輯器風格的

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

六.resolve 別名設置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@src': path.resolve(__dirname, '../src')
    }
  },

別名的設置可能遇到的坑是，在html裏可使用別名@src

可是在css是沒法識別別名。解決方案是使用 ~@src,或者在css-loader的配置項裏再次設置別名

七.webpack 日誌儀表盤 webpack-dashboard

這個是優打包出來的終端界面的一個插件

https://www.jianshu.com/p/46b...
https://github.com/Formidable...

使用時，須要注意的的坑是，須要配置script腳本命令

package.json配置方法像這樣，其餘的參考文檔就能夠了，像普通插件同樣使用就好

"scripts": {
    "build": "NODE_ENV=production webpack-dashboard -- webpack --config build/webpack.prod.conf.js",
    "dev": "NODE_ENV=development webpack-dashboard -- webpack-dev-server --config build/webpack.dev.conf.js",
    
  },