一個用webpack4打包的vue 的項目，參照vue-cli的webpack設置，

一步一步帶你完成一個vue的打包的項目，每個commit對應一個步驟。

github 地點

clone project

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

install

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
}) + '\n\n')

經由過程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來打包優化穩定的庫，
2、經由過程cache-loader來做loader的緩存，
3、經由過程UglifyJsPlugin的parallel來開啟多線程打包

先運轉npm run dll 然後 npm run build