webpack配置【三】文件压缩，生成sourcemap,debug模式下使用

1.webpack.config.js【压缩配置和source-map开启】

const path=require('path');
//webpack生成html
const HtmlWebpackPlugin=require('html-webpack-plugin');
//css打包分离
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

const PATHS={
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};
//css打包分离
const plugin = new ExtractTextPlugin({
  filename: '[name].css',
  ignoreOrder: true,
}) 

module.exports={
  devServer:{ 
    host: process.env.HOST, //Defaults to 'localhost
    port: 80,  //Defalut to 8080
    // overlay: true captures only errors
    overlay: {
      errors: true,
      warnings: true,
    },
  },
  //压缩配置
  performance:{
    hints:"warning",//'error',文件大小超出提示警告
    maxEntrypointSize: 500000,// 单位bytes，入口html文件最高500K
    maxAssetSize: 450000,// 单位bytes，图片或css文件等最高450K
  },
  entry:{
    app:PATHS.app,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  //使用source-map方便debug调试
  devtool: 'source-map',
  module:{
    rules:[
      {
        test: /\.js$/,
        enforce: 'pre',
        
        loader:'eslint-loader',
        options:{
          emitWarning: true,
        },
      },
      //css打包分离
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: plugin.extract({
          use: {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          fallback : 'style-loader',
        }),
      }
    ],
  },
  plugins:[
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
    //css打包分离
    plugin,
  ],
};

2.下载压缩插件，下载依赖

 cnpm i babili-webpack-plugin --save-dev

3.在webpack.config.js中引入并使用

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//css打包分离
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
//压缩
const BabiliPlugin = require('babili-webpack-plugin')

const PATHS={
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};
//css打包分离
const plugin = new ExtractTextPlugin({
  filename: '[name].css',
  ignoreOrder: true,
}) 

module.exports={
  devServer:{ 
    host: process.env.HOST, //Defaults to 'localhost
    port: 80,  //Defalut to 8080
    // overlay: true captures only errors
    overlay: {
      errors: true,
      warnings: true,
    },
  },
  performance:{
    hints:"warning",//'error'
    maxEntrypointSize: 500000,// bytes
    maxAssetSize: 450000,// bytes
  },
  entry:{
    app:PATHS.app,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  使用source-map方便debug调试
  devtool: 'source-map',
  module:{
    rules:[
      {
        test: /\.js$/,
        enforce: 'pre',
        
        loader:'eslint-loader',
        options:{
          emitWarning: true,
        },
      },
      //css打包分离
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: plugin.extract({
          use: {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          fallback : 'style-loader',
        }),
      }
    ],
  },
  plugins:[
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
    //css打包分离
    plugin,
    //压缩
    new BabiliPlugin(),
  ],
};

4.打包运行搞定

npm run build