摘要：的開(kāi)發(fā)環(huán)境配置說(shuō)明完整的的配置地址開(kāi)發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_(kāi)發(fā)者們。的做法是在的字段配置類似這樣這樣配置后，當(dāng)運(yùn)行時(shí)，在里通過(guò)可以取到值以來(lái)做判斷就可以啦。

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

開(kāi)發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_(kāi)發(fā)者們。

你不需要考慮 hash 是否穩(wěn)定、代碼提取是否正常。

只要你自己能夠開(kāi)發(fā)、并且覺(jué)得開(kāi)發(fā)體驗(yàn) ok，那么你這個(gè)配置就是靠譜的。

這篇文章主要是以我自己搭建 vue + webpack 的開(kāi)發(fā)為例子，記錄自己從 0 搭建時(shí)的思路和遇到的坑。

所以可能不會(huì)對(duì)于配置的細(xì)節(jié)，做太詳細(xì)的說(shuō)明

那么，重點(diǎn)說(shuō)明的是思路和一些注意點(diǎn)

1.從 0 搭建一個(gè)項(xiàng)目的思路

2.搭建過(guò)程中我遇到的坑，給大家分享一下。

下面是我們要配置的功能，也會(huì)體現(xiàn)從 0 搭建項(xiàng)目的思路和注意點(diǎn)。

1.處理 vue 文件

2.使用 devServer

3.處理靜態(tài)資源的插件和 loader

3.1 處理 css/css 預(yù)處理器

3.2 處理圖片路徑

3.3 處理 ES6 語(yǔ)法

3.4 postcss 自動(dòng)添加 css 前綴

3.5 在 vue 里開(kāi)啟 css module

4.指定 devtool

5.代碼規(guī)范約束配置

.eslint

.editorconfig

pre-commit

6.resolve 別名設(shè)置

7.webpack 日志儀表盤 webpack-dashboard

從零搭建，就是從空文件夾開(kāi)始嘛。那么首先

mkdir webpack4-project

cd webpack4-project

npm init

初始化項(xiàng)目后，下一步做什么呢？

想想，我們既然要配置 vue webpack 的前端開(kāi)發(fā)環(huán)境

那肯定要下載 webpack 、vue 吧，瀏覽器無(wú)法處理 vue 文件，那肯定需要 vue-loader 吧

不用擔(dān)心自己做的對(duì)不對(duì)，反正做錯(cuò)了，終端肯定會(huì)告訴你了，所以一定要自己動(dòng)手

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

1.注意：安裝 vue-loader 后，會(huì)提示你 vue-loader 依賴 css-loader 和 vue-template-compiler

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

下載之后，就可以去寫 webpack 配置了。

2.注意：如果你直接在終端輸入 webpack，會(huì)提示你安裝 webpack-cli。

3.注意：安裝后嘗試直接在項(xiàng)目里寫 vue 文件，會(huì)提示你需要 loader 來(lái)處理。于是去配置 vue-loader

4.注意： 所以我們?cè)?webpack.config.js 里 module 里配置，然后提示你需要 css-loader 和 VueLoaderPlugin

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

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

但是沒(méi)有 devServer，目前我們還看不到效果，接下來(lái)是開(kāi)發(fā)服務(wù)器配置

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

安裝后，就可以去配置 devServer，devServer 可以有很多參數(shù)，

但是目前可以不用關(guān)注。因?yàn)?webpack4 是有默認(rèn)配置的。

1.注意： 這里涉及到環(huán)境變量的區(qū)分。

因?yàn)橐粋€(gè)項(xiàng)目在開(kāi)發(fā)和生產(chǎn)環(huán)境下，有不同的需求。所以自然要有一個(gè)變量用來(lái)區(qū)分環(huán)境。

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

這樣配置后，

當(dāng)運(yùn)行 npm run dev 時(shí)，在 webpack.config.js 里通過(guò) process.env.NODE_ENV 可以取到值 development

以 process.env.NODE_ENV 來(lái)做 if 判斷就可以啦。

那么 webpack4 中，依舊可以這樣做。也可以通過(guò) mode 來(lái)指定環(huán)境。也是設(shè)置 process.env.NODE_ENV 的值

webpack3 中一般會(huì)設(shè)置 DefinePlugin，但是 webpack4 自動(dòng)幫你設(shè)置該插件

它可以讓其他第三方類庫(kù)或者你自己的 vue 代碼中取到 process.env.NODE_ENV,在業(yè)務(wù)中判斷環(huán)境。

    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: isDev ? ""development"" : ""production"" // 因?yàn)檫@個(gè)插件直接執(zhí)行文本替換，給定的值必須包含字符串本身內(nèi)的實(shí)際引號(hào)
      }
    }),

2.注意: devServer 常用配置項(xiàng)

  devServer: {
    host: "0.0.0.0",   // IP地址
    port: 8888,        // 端口號(hào)
    hot: true,          // 開(kāi)啟熱更新
    overlay: true,      // 開(kāi)啟報(bào)錯(cuò)提示顯示在瀏覽器遮罩層
    historyApiFallback: true   // 設(shè)置vue-router的模式是histroy
  },

其中熱更新在 webpack3 中需要配置插件，webpack4 依舊可以這樣寫。但是已經(jīng)是默認(rèn)配置了。

plugins: [new webpack.HotModuleReplacementPlugin()];

現(xiàn)在運(yùn)行 npm run dev 已經(jīng)可以跑起來(lái)服務(wù)，但是沒(méi)有 index.html

3.注意: 安裝 html-webpack-plugin,指定 template 后，才能在開(kāi)發(fā)服務(wù)器上可以看到自己的代碼效果了

4.注意：區(qū)分 npm run dev 運(yùn)行時(shí)的 webpack 和終端里直接輸出 webpack 的區(qū)別

前者是項(xiàng)目本地的 webpack,后者是全局的 webpack

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

style-loader:將css以style標(biāo)簽的形式插入到html中
css-loader: 能在js引入css依靠的就是css-loader解析

2.注意：css 預(yù)處理器，以 stylus 為例子，需要安裝 stylus 和 stylus-loader

配置時(shí)，注意 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自動(dòng)轉(zhuǎn)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的語(yǔ)法，需要babel

1.注意 npm 升級(jí)后，很多包的命名方式已經(jīng)變更。類似于@babel/core，@babel/preset-env 這種

2.注意：可以通過(guò) exclude 來(lái)設(shè)置不用編譯 ES6 的文件。通常 node_modules 的依賴包都不需要編譯處理。

3.注意：babel-preset-env 、 babel-polyfill、babel-transform-runtime-plugin的區(qū)別

babel-preset-env

babel-preset-env: 可以babel需要兼容哪些瀏覽器。比如所有瀏覽器的最后2個(gè)版本。
babel-preset-env 是依據(jù) Can i use 和 browserslist 來(lái)判斷某一個(gè) JS 語(yǔ)法是否需要用 babel 編譯


但是babel-preset-env只能編譯ES6中JS的語(yǔ)法，無(wú)法編譯ES6中的api

比如let / const 會(huì)被編譯 為var 

但是Array.include() Array.from() new Set()無(wú)法被編譯

babel-polyfill和babel-transform-runtime-plugin

babel-polyfill是全局墊片，目的是提供一個(gè)完整的ES6環(huán)境，用于app，會(huì)污染全局變量，體積更大

babel-transform-runtime-plugin是局部墊片，主要用于開(kāi)發(fā)庫(kù)，不會(huì)污染全局變量，體積更小。

結(jié)論就是一般做業(yè)務(wù)開(kāi)發(fā)就 babel-preset-env + babel-polyfill 就可以。

文檔資料

實(shí)踐過(guò)程中，查閱過(guò)的文檔留在這里。如果 API 忘記或者變化了，方便查閱。
https://babeljs.io/

關(guān)于@babel/preset-env的一篇文章，解釋useBuiltIns的三個(gè)選項(xiàng)
https://www.jianshu.com/p/0dc...

安裝postcss-loader / autoprefixer

配置loader后，還需要?jiǎng)?chuàng)建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/...

簡(jiǎn)單說(shuō)就是在css-loader里增加一個(gè)配置項(xiàng) module:true

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

需要參考文檔中的【可選用法】，用oneOf來(lái)配置

如果不指定devtool，你會(huì)發(fā)現(xiàn)代碼調(diào)試起來(lái)十分不便，出錯(cuò)的行數(shù)也看不出來(lái)。

  devtool: "cheap-module-eval-source-map", // webpack4在開(kāi)發(fā)階段可以不寫devtool

devtool的配置我沒(méi)詳細(xì)研究，我是開(kāi)發(fā)階段用cheap-module-eval-source-map，生產(chǎn)階段去掉devtool

slint的配置,我用的stardard風(fēng)格的，

官方文檔地址 ： 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可能遇到的問(wèn)題：

vue無(wú)法被eslint識(shí)別，配置plugin:["html"]

希望用eslint-loader檢查vue文件，但是又不能只用eslint-loader解析vue，可以設(shè)置enforce:"pre"。這樣在處理.vue之前，先用eslint-loader預(yù)處理

記得用exclude: /node_modules/.關(guān)閉對(duì)第三方庫(kù)代碼風(fēng)格的檢查

eslint很多報(bào)錯(cuò)的話，可以配置命令一次性修正

還可以通過(guò)一個(gè)包husky保證在git commit時(shí)，eslint報(bào)錯(cuò)的情況下無(wú)法提交，從而保證提交到git倉(cāng)庫(kù)上代碼的規(guī)范性。

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

分享一下.editorconfi的配置,用來(lái)統(tǒng)一編輯器風(fēng)格的

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

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

但是在css是無(wú)法識(shí)別別名。解決方案是使用 ~@src,或者在css-loader的配置項(xiàng)里再次設(shè)置別名

這個(gè)是優(yōu)打包出來(lái)的終端界面的一個(gè)插件

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

使用時(shí)，需要注意的的坑是，需要配置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",
    
  },