摘要：的開發環境配置說明完整的的配置地址開發環境的搭建，總體而言就比較輕松，因為用戶就是開發者們。的做法是在的字段配置類似這樣這樣配置后，當運行時，在里通過可以取到值以來做判斷就可以啦。

完整的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

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

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 需要安裝 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

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 的解析順序是從右向左的。

處理圖片需要 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]"
        }
      },

處理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...

安裝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")
    ]
}

參考vue-loader@15就可以
https://vue-loader.vuejs.org/...

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

這里要注意，如果你是有的vue文件用css module，有的不用的話。

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

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

  devtool: "cheap-module-eval-source-map", // webpack4在開發階段可以不寫devtool

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

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: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@src": path.resolve(__dirname, "../src")
    }
  },

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

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

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

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",
    
  },