Webapck配置詳解

webpack 1
Webapck 2
Webpack之編寫⼀個Loader、Plugins和webpack的打包原理分析
Webpack 4
玩轉 webpack，使你的打包速度提高 90%
跟着"呆妹"來學webpack(基礎篇)
霖呆呆向你發起了多人學習webpack-構建方式篇(2)
霖呆呆的六個自定義Webpack插件詳解-自定義plugin篇(3)

有些項目不按常理出牌對於只有vue.config.js的項目

tree-shaking (搖樹)

webpack.config.js

開發模式設置後，不會幫助咱們把沒有引用的代碼去掉，生產模式，會自動幫咱們搖樹，能夠不用設置

optimization:{
    usedExports:true,
}

package.json

"sideEffects":false//全部的靜態引入文件都會編譯搖樹

"sideEffects":["*.css","@babel/polyfill"],//引入的文件是css文件 和babel/polyfill不會編譯搖樹

vue.config.js

var webpack = require('webpack');

module.exports = {
  //頁面入口文件配置
  // devtool: 'eval-source-map',     //開發模式開啓
  entry:{
    index: './src/index.js'
  },

  //入口文件輸出配置 （即入口文件最終要生成什麼名字的文件、存放到哪裏）
  output: {
    path: './dist/',
    publicPath: './dist/',
    filename: '[name].js',
    libraryTarget: 'umd'
  },
  //插件項
  plugins: [
    //打包UglifyJs屏蔽錯誤
      new webpack.optimize.UglifyJsPlugin({
          compress:{
              warnings:false
          },
      }),
    //生成公用js
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      filename: "common.js",
    }),
  ],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js',
      jquery: 'jquery' 
    }
  },
  module: {
    //加載器配置
    loaders: [
      { test: /\.vue$/,loader: 'vue-loader'},
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
      { test: /\.js$/, loader: 'babel-loader'},
      { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=10240'},
      { test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'file-loader'}
    ]
  },

  externals: {
    //第三方插件
  },
}

打包項目

//這行命令的意思是，webpack幫我打包的時候，以webpackconfig.js這個文件爲配置文件
npx webpack  --config webpackconfig.js

npx webpack

surceMap 源代碼與打包後的代碼的映射

@babel/polyfill的使用

@babel/plugin-transform-runtime的使用