用webpack4帶你實現一個vue的打包的專案

naice發表於2019-02-28
WebVue

一個用webpack4打包的vue 的專案，參照vue-cli的webpack配置，

一步一步帶你實現一個vue的打包的專案，每一個commit對應一個步驟。

github 地址

克隆專案

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

安裝依賴

npm install or yarn

一、初始化專案

初始化專案，用vue-loader來打包.vue檔案，html-webpack-plugin外掛來匯出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`)
      }
    ]
  }
  +++
}

複製程式碼

執行 webpack --config build/webpack.base.conf.js

二、打包css和圖片等資源

這裡打包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`
    })
  ]
}

複製程式碼

執行 webpack --config build/webpack.base.conf.js

三、配置熱載入、代理等開發環境

通過build/config.js來設定開發配置。如下注釋


const path = require(`path`)

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

複製程式碼

在webpack.dev.conf.js中，通過webpack-dev-server外掛來開啟熱過載服務，同時配置自動補全css相容程式碼的外掛，postcss-loader

執行npm run dev 或者 yarn dev 就可以啟動服務了

四、配置打包環境

通過build/config.js來設定開發配置。如下注釋

const path = require(`path`)

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

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

複製程式碼

執行npm run build 或者 yarn build 就可以實現打包vue專案啦。

五、檢查版本，優化打包輸出和Eslint設定

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


// 檢查時候有安裝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去設定規則

{
  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來打包優化不變的庫，具體看webpack.dll.conf.js檔案

2、通過cache-loader來做loader的快取，

3、通過UglifyJsPlugin的parallel來開啟多執行緒打包


{
    test: /.vue$/,
    loader: `vue-loader`,
    exclude: /node_modules/,
    include: resolve(`src`),
    options: {
      cacheDirectory: resolve(`./cache-loader`), // 快取
      cacheIdentifier: `cache-loader:{version} {process.env.NODE_ENV}`
    }
},
{
    test: /.js$/,
    use: isProduction ? [
      {
        loader: `cache-loader`,
        options: {
          cacheDirectory: resolve(`cache-loader`), // 快取
        }
      },
      `babel-loader`
    ] : `babel-loader`,
    exclude: /node_modules/,
    include: resolve(`src`)
},

複製程式碼

先執行npm run dll 然後 npm run build

給大佬奉上 -> github 地址

相關文章