Webapck配置详解

webpack 1Webapck 2Webpack之编写⼀个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的使用