摘要：一個(gè)用打包的的項(xiàng)目，參照的配置，一步一步帶你實(shí)現(xiàn)一個(gè)的打包的項(xiàng)目，每一個(gè)對應(yīng)一個(gè)步驟。如下注釋模板生產(chǎn)環(huán)境的開啟靜態(tài)文件的壓縮如果是的話需要打包完成顯示包大小的狀態(tài)分析運(yùn)行或者就可以實(shí)現(xiàn)打包項(xiàng)目啦。

一個(gè)用webpack4打包的vue 的項(xiàng)目，參照vue-cli的webpack配置，

一步一步帶你實(shí)現(xiàn)一個(gè)vue的打包的項(xiàng)目，每一個(gè)commit對應(yīng)一個(gè)步驟。

git clone git@github.com:naihe138/nvue.git

npm install or yarn

初始化項(xiàng)目，用vue-loader來打包.vue文件，html-webpack-plugin插件來導(dǎo)出html文件。
第一步我們很簡單，就利用vue-loader 和 babel-loader 是把.vue文件打包出來，總共才40多行代碼，看build/webpack.base.conf.js文件注釋就看的懂。+++表示有省略的代碼

module.exports = {
  +++
  // 模塊，loader
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
        exclude: /node_modules/,
        include: resolve("src")
      },
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        include: resolve("src")
      }
    ]
  }
  +++
}

運(yùn)行 webpack --config build/webpack.base.conf.js

這里打包css以sass 為例，用到了mini-css-extract-plugin插件提取css，用url-loader來處理字體、圖片、音頻等資源。非常簡單。如下代碼，+++表示有省略的代碼

+++
module.exports = {
  +++
  // 模塊，loader
  module: {
    rules: [
      +++
      {
        test: /.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "static/img/[name].[hash:7].[ext]"
        }
      }
      +++
    ]
  },
  // 插件
  plugins: [
    +++
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[hash].css",
      chunkFilename: "static/css/[name].[hash].css"
    })
  ]
}

運(yùn)行 webpack --config build/webpack.base.conf.js

通過build/config.js來設(shè)置開發(fā)配置。如下注釋

const path = require("path")

module.exports = {
  dev: {
    assetsSubDirectory: "static", // 靜態(tài)文件目錄
    assetsPublicPath: "/", // 相對文件路徑
    proxyTable: {},
    host: "localhost",
    port: "8000",
    autoOpenBrowser: false, // 是否自動(dòng)打開瀏覽器
    errorOverlay: true, // 瀏覽器錯(cuò)誤提示遮罩層
    notifyOnErrors: true, // 編譯錯(cuò)誤的時(shí)候通知提示，需要friendly-errors-webpack-plugin 配合
    poll: false,
    useEslint: true, // 便宜使用eslint-loader模塊
    showEslintErrorsInOverlay: false, // eslint瀏覽器錯(cuò)誤提示遮罩層
    devtool: "cheap-module-eval-source-map", // Source Maps
    cssSourceMap: true, // css Source Maps
    cacheBusting: false, // vue debugg 提示
  }
}

在webpack.dev.conf.js中，通過webpack-dev-server 插件來開啟熱重載服務(wù)，同時(shí)配置自動(dòng)補(bǔ)全css兼容代碼的插件，postcss-loader

運(yùn)行npm run dev 或者 yarn dev 就可以啟動(dòng)服務(wù)了

通過build/config.js來設(shè)置開發(fā)配置。如下注釋

const path = require("path")

module.exports = {
  +++
  build: {
    // html模板
    index: path.resolve(__dirname, "../dist/index.html"),
    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    // 生產(chǎn)環(huán)境的souce map
    productionSourceMap: false,
    devtool: "#source-map",
    // 開啟靜態(tài)文件的Gzip壓縮
    // 如果是true 的話  需要 npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],

    // 打包完成顯示包大小的狀態(tài)分析
    // `npm run build --report`
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

運(yùn)行npm run build 或者 yarn build 就可以實(shí)現(xiàn)打包vue項(xiàng)目啦。

在check-version.js中用 shelljs 模塊檢查時(shí)候有npm命令， semver模塊語義化版本號，然后在build.js合并webpack.prod.conf.js的的配置，然后組在格式化輸出。

// 檢查時(shí)候有安裝npm命令
if (shell.which("npm")) {
  versionRequirements.push({
    name: "npm",
    currentVersion: exec("npm --version"),
    versionRequirement: packageConfig.engines.npm
  })
}

// 格式化輸出
process.stdout.write(stats.toString({
  colors: true,
  modules: false,
  children: false,
  chunks: false,
  chunkModules: false
}) + "

")

通過eslint-loader 來配置eslint的檢查，建立.eslintrc.js去設(shè)置規(guī)則

{
  test: /.(js|vue)$/,
  loader: "eslint-loader",
  enforce: "pre",
  include: [resolve("src")],
  exclude: /node_modules/,
  options: {
    formatter: require("eslint-friendly-formatter"),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
},

1、添加DllPlugin和DllReferencePlugin來打包優(yōu)化不變的庫，
2、通過cache-loader來做loader的緩存，
3、通過UglifyJsPlugin的parallel來開啟多線程打包

先運(yùn)行npm run dll 然后 npm run build