摘要：項(xiàng)目地址一知識(shí)獲取當(dāng)前文件所在路徑，等同于把一個(gè)路徑或路徑片段的序列解析為一個(gè)絕對(duì)路徑給定的路徑的序列是從右往左被處理的，后面每個(gè)被依次解析，直到構(gòu)造完成一個(gè)絕對(duì)路徑如果處理完全部給定的片段后還未生成一個(gè)絕對(duì)路徑，則當(dāng)前工作目錄會(huì)被用上生成

項(xiàng)目git地址

__dirname: 獲取當(dāng)前文件所在路徑，等同于path.dirname(__filename)

console.log(__dirname);
// Prints: /Users/mjr
console.log(path.dirname(__filename));
// Prints: /Users/mjr

path.resolve([..paths]): 把一個(gè)路徑或路徑片段的序列解析為一個(gè)絕對(duì)路徑

給定的路徑的序列是從右往左被處理的，后面每個(gè) path 被依次解析，直到構(gòu)造完成一個(gè)絕對(duì)路徑
如果處理完全部給定的 path 片段后還未生成一個(gè)絕對(duì)路徑，則當(dāng)前工作目錄會(huì)被用上
生成的路徑是規(guī)范化后的，且末尾的斜杠會(huì)被刪除，除非路徑被解析為根目錄
長(zhǎng)度為零的 path 片段會(huì)被忽略
如果沒有傳入 path 片段，則 path.resolve() 會(huì)返回當(dāng)前工作目錄的絕對(duì)路徑

path.resolve("/foo/bar", "./baz");
// 返回: "/foo/bar/baz"

path.resolve("/foo/bar", "/tmp/file/");
// 返回: "/tmp/file"

path.resolve("wwwroot", "static_files/png/", "../gif/image.gif");
// 如果當(dāng)前工作目錄為 /home/myself/node，
// 則返回 "/home/myself/node/wwwroot/static_files/gif/image.gif"

項(xiàng)目目錄生成如下文件

.
├── build
│?? ├── build.js
│?? ├── index.html
│?? ├── webpack.base.conf.js
│?? ├── webpack.dev.conf.js
│?? └── webpack.prod.conf.js
├── package.json
├── package-lock.json
└── src
    ├── App.vue
    ├── main.js
    ├── timg.gif
    └── timg.jfif

首先，先裝下webpack依賴：

npm i webpack webpack webpack-cli -D

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    bundle: path.resolve(__dirname, "../src/main.js")
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name].[hash].js",
    publicPath: "/"
  },
  module: {
    rules: [
      
    ]
  },
  plugins: [
    
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html")
    })
  ],
  resolve: {
    
  }
};

上面用到了html-webpack-plugin插件，裝下：

npm i html-webpack-plugin -D

const merge = require("webpack-merge");
const path = require("path");
const baseConfig = require("./webpack.base.conf");
module.exports = merge(baseConfig, {
  // mode關(guān)系到代碼壓縮質(zhì)量  https://webpack.docschina.org/guides/tree-shaking/
  mode: "development",
  // source-map,將編譯后的代碼映射到原代碼，便于報(bào)錯(cuò)后定位錯(cuò)誤
  devtool: "inline-source-map",
  
  devServer: {
    
    contentBase: path.resolve(__dirname, "../dist"),
    
    open: true
  }
});

合并webpack配置的插件webpack-merge，能夠啟一個(gè)簡(jiǎn)易服務(wù)的webpack-dev-server，詳情

npm i webpack-dev-server webpack-merge -D

const merge = require("webpack-merge");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const path = require("path");
const baseConfig = require("./webpack.base.conf");
module.exports = merge(baseConfig, {
  mode: "production",
  devtool: "source-map",
  module: {
    rules: []
  },
  plugins: [
    new CleanWebpackPlugin(["dist/"], {
      root: path.resolve(__dirname, "../")
    })
  ]
});

清除文件的插件：

npm i clean-webpack-plugin -D

const webpack = require("webpack");
const config = require("./webpack.prod.conf");

webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    // 在這里處理錯(cuò)誤
    console.error(err);
    return;
  }
  // 處理完成
  console.log(stats.toString({
    chunks: false,  // 使構(gòu)建過程更靜默無輸出
    colors: true    // 在控制臺(tái)展示顏色
  }));
});

// package.json
{
  +++
  "scripts": {
    "build": "node build/build.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  },
}

以上算是一個(gè)webpack的基本結(jié)構(gòu)，如果入口文件（main.js）里引入的是正經(jīng)js，npm dev和npm build是可以的打包編譯的，但是我們是要寫vue，那就要加些loader和plugins了

依賴安裝要求：webpack 4.x | babel-loader 7.x | babel 6.x,注意babel-loader和babel的版本，不然會(huì)報(bào)錯(cuò)

npm install -D babel-loader@7 babel-core babel-preset-env webpack

然后再配置中加入

// base.conf.js
module.exports = {
  +++
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      +++
    ]
  }
}

我們還需要添加一個(gè)配置文件（.babelrc）在根目錄下：

/// .babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [">0.25%", "last 2 versions", "not ie 11", "not op_mini all"]
      }
    }]
  ]
}

這就是 babel-preset-env 的作用，幫助我們配置 babel。我們只需要告訴它我們要兼容的情況（目標(biāo)運(yùn)行環(huán)境），它就會(huì)自動(dòng)把代碼轉(zhuǎn)換為兼容對(duì)應(yīng)環(huán)境的代碼。
以上代碼表示我們要求代碼兼容最新兩個(gè)版本的瀏覽器，不用兼容 11(及以下)和Opera Mini，另外市場(chǎng)份額超過 0.25% 的瀏覽器也必須支持。
只需要告訴 babel-preset-env 你想要兼容的環(huán)境，它就會(huì)自動(dòng)轉(zhuǎn)換

如果我們希望在頁(yè)面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開發(fā)時(shí)，引入圖片會(huì)遇到一些問題

其中一個(gè)就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁(yè)面的，而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件

另外，如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。這個(gè)問題可以通過url-loader解決。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。

url-loader和file-loader是什么關(guān)系呢？簡(jiǎn)答地說，url-loader封裝了file-loader。url-loader賴于file-loader，即使用url-loader時(shí)，也要安裝file-loader

npm i url-loader file-loader -D

/// base.conf.js
module.exports = {
  +++
  module: {
    rules: [
      +++
      {
        test: /.(png|jpg|jfif|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              // 低于這個(gè)limit就直接轉(zhuǎn)成base64插入到style里，不然以name的方式命名存放
              // 這里的單位時(shí)bit
              limit: 8192,
              name: "static/images/[hash:8].[name].[ext]"
            }
          }
        ]
      },
      // 字體圖標(biāo)啥的，跟圖片分處理方式一樣
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: "url-loader",
            name: "static/font/[hash:8].[name].[ext]"
          }
        ]
      },
    ]
  },
}

作用自己去看

npm i vue-loader -D

// base.conf.js
module.exports = {
  +++
  module: {
    rules: [
      +++
      {
        test: /.vue$/,
        loader: "vue-loader"
      }
    ]
  }
}

在這里還要一個(gè)插件，這個(gè)插件是必須的！

// base.conf.js
const VueLoaderPlugin = require("vue-loader/lib/plugin")
module.exports = {
  +++
  plugins: [
      // 它的職責(zé)是將你定義過的其它規(guī)則復(fù)制并應(yīng)用到 .vue 文件里相應(yīng)語(yǔ)言的塊。
      // 例如，如果你有一條匹配 /.js$/ 的規(guī)則，那么它會(huì)應(yīng)用到 .vue 文件里的 

好了，npm dev 先看一下女神，放松一下：

使用 splitChucksPlugin 插件，這是 Webpack 自帶的，不用安裝第三方依賴，默認(rèn)配置即可

module.exports = {
  +++
  plugins: [
    +++
    new webpack.optimize.SplitChunksPlugin()
  ]
}

想了解這個(gè)插件的默認(rèn)配置及如何配置，英文，中文

每次我們對(duì)項(xiàng)目進(jìn)行打包時(shí)，我們都會(huì)把引用的第三方依賴給打包一遍，比如 Vue、Vue-Router、React 等等。但是這些庫(kù)的代碼基本都是不會(huì)變動(dòng)的，我們沒必要每次打包都構(gòu)建一次，所以我們最好將這些第三方庫(kù)提取出來多帶帶打包，這樣有利于減少打包時(shí)間。
官方插件是 DllPlugin。推薦一個(gè)比較好用的插件 —— autodll-webpack-plugin

npm i autodll-webpack-plugin -D

// base.conf.js
module.exports = {
  +++
  plugins: [
   // 將一些不太可能改動(dòng)的第三方庫(kù)多帶帶打包，會(huì)通過緩存極大提升打包速度
    new AutoDllPlugin({
      // will inject the DLL bundle to index.html
      // default false
      inject: true,
      debug: false,
      filename: "[name]_[hash].js",
      path: "static",
      entry: {
        // [name] = vue, 在這里會(huì)將entry里的每個(gè)item(vue,jquery)都打包成一個(gè)js
        vue: [
          "vue",
          "vue-router"
        ],
        // [name] = jquery
        // jquery: [
        //   "jquery",
        //   "jquery-from"
        // ]
      }
    }),
    +++
  ]
}

inject 為 true，插件會(huì)自動(dòng)把打包出來的第三方庫(kù)文件插入到 HTML。filename 是打包后文件的名稱。path 是打包后的路徑。entry 是入口，vendor 是你指定的名稱，數(shù)組內(nèi)容就是要打包的第三方庫(kù)的名稱，不要寫全路徑，Webpack 會(huì)自動(dòng)去 node_modules 中找到的。
每次打包，這個(gè)插件都會(huì)檢查注冊(cè)在 entry 中的第三方庫(kù)是否發(fā)生了變化，如果沒有變化，插件就會(huì)使用緩存中的打包文件，減少了打包的時(shí)間，這時(shí) Hash 也不會(huì)變化。

“熱重載”不只是當(dāng)你修改文件的時(shí)候簡(jiǎn)單重新加載頁(yè)面。啟用熱重載后，當(dāng)你修改 .vue 文件時(shí)，該組件的所有實(shí)例將在不刷新頁(yè)面的情況下被替換。它甚至保持了應(yīng)用程序和被替換組件的當(dāng)前狀態(tài)！當(dāng)你調(diào)整模版或者修改樣式時(shí)，這極大地提高了開發(fā)體驗(yàn)，以下兩種方式擇一即可

方式1：?jiǎn)?dòng)的時(shí)候通過--hot選項(xiàng)就ok了，webpack，vue-loader

"scripts": {
  +++
  "dev": "webpack-dev-server --hot --inline --progress --config build/webpack.dev.conf.js"
},

方式2：或者通過配置webpack.dev.config.js，相比第一種，就會(huì)麻煩一點(diǎn)

const webpack = require("webpack")
module.exports = {
  +++
  module: {
    devServer: {
      +++
      // 開啟熱重載
      hot: true
    },
    plugins: [
      // 啟用模塊熱替換(HMR)
      new webpack.HotModuleReplacementPlugin(),
      // 當(dāng)開啟 HMR 的時(shí)候使用該插件會(huì)顯示模塊的相對(duì)路徑，建議用于開發(fā)環(huán)境。
      new webpack.NamedModulesPlugin(),
      +++
    ]
  }
}

確保 VS Code 安裝了 Vetur（設(shè)置編輯器支持vue文件，如果寫過vue忽略） 和 Eslint 插件

npm i -g eslint@latest

eslint --init

然后選個(gè)最流行的就行了
" })

代碼如果eslint有報(bào)錯(cuò)，就讓編譯不通過

npm i eslint-loader babel-eslint -D

{
  +++
  "parser": "babel-eslint"
}

module.exports = {
  module: {
    rules: [
      {
        test: /.(vue|js)$/,
        loader: "eslint-loader",
        exclude: /node_modules/,
        // 預(yù)處理
        enforce: "pre",
        include: [path.join(__dirname, "..", "src")]
      }
    ]
  }
}

代碼提交之前對(duì)代碼進(jìn)行檢查

npm i husky -D 

{
  +++
  "script": {
    +++
    "precommit": "eslint --fix --ext .js --ext .vue src/"
  }
}

該工具可以在我們提交代碼時(shí)，調(diào)用"precommit"鉤子，執(zhí)行預(yù)處理操作，eslint不通過，無法提交

在提交時(shí)僅對(duì)git add的 js,vue 文件進(jìn)行檢測(cè)lint-staged 和 husky 在 pre-commit 階段做代碼檢查

npm i lint-staged -D

{
  +++
  "script": {
    +++
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
}

npm i juery -D

 module.exports = {
   +++
   plugins: [
     +++
     new webpack.ProvidePlugin({
       $: "jquery"
     })
   ]
  };

這樣就可以將$當(dāng)全局變量使用了，當(dāng)然eslint要配置個(gè)global，這里不介紹了

對(duì)你有幫助的話點(diǎn)個(gè)刷波6，點(diǎn)個(gè)贊吧