webpack1.x 打包文件过大优化

1. 图片单独打包

module: {
    loaders: [
        {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'url?limit=8192&name=./assets/img/[hash:8].[name].[ext]',
        },
   ]
}

 

2. 单独打包成一个css

注：

# for webpack 3 npm install --save-dev extract-text-webpack-plugin

# for webpack 2 npm install --save-dev extract-text-webpack-plugin@2.1.2

# for webpack 1 npm install --save-dev extract-text-webpack-plugin@1.0.1

module.exports = {
  plugins: [
      new ExtractTextPlugin("styles.css"),
  ],
  module: {
      loaders: [
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract("style-loader","css-loader")
        },
        {
          test: /\.scss$/,
          loader: "style!css!sass"
        },
        {
          test: /\.less$/,
          loader: "style!css!less"
        },
    ]
  }
}

 

3.提取公共类库

//首先在entry 声明第三方库
entry: {
   app: ['index.js'], 
   //app: path.resolve(APP_PATH, 'index.js'),
   //添加要打包在vendeors里面的库
   vendors: ['jquery', 'moment']
},
plugins: {
      //把入口文件里面的数组打包成vendors.js
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}

 

4.js压缩

plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      },
      output: {
        comments: false,
      }
    }),
]

 

 

　　

 

转载于:https://www.cnblogs.com/yangstar90/p/7641333.html