webpack的优化

1、index.js 

// webpack自带的优化
// import在生产环境下 会自动去除掉没用的代码(比如写过但是没调用的方法)
// 这中方式叫tree-shaking（import）：这种方式会把没用的代码自动删除掉
// import calc from './main'
// console.log(calc.add(1,2))
// es6模块会把导出结果放到default上
// require语法并不支持tree-shaking
let calc = require('./main')
console.log(calc.default.add(1, 2));

// scope hosting 作用域提升
// 打包后，只会显示console.log(d, '------------')，而其它简单代码webpack中直接省略，可以简化代码
let a = 1;
let b = 2;
let c = 3;
let d = a + b + c;
console.log(d, '------------')

calc.js

let add = (a, b) => {
  return a + b + 'add';
}

let minus = (a, b) => {
  return a - b + 'minus';
}
export default {
  add, minus
}

2、webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
// happypack实现多线程打包
// 打包多页应用
module.exports = {
  mode: 'production', // 两种 development开发环境， production生产环境
  entry: {
    index: './src/index.js'
  }, // 入口
  output: { // 出口
    filename: '[name].js', // 打包后的文件名 [name]为home或者main
    path: path.resolve(__dirname, 'dist'), // 打包后输出的文件路径，在__dirname路径下创建文件dist输出，path.resolve() 方法将路径或路径片段的序列解析为绝对路径。
  },
  module: {
    noParse: /jquery/, //因为jquery没有其他的依赖包，所以引用jquery时不解析依赖，提高性能****************
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 正则解析js，默认包括node_modules，所以排除node_modules可以提高性能,include为具体解析那个文件的js，也可以提高性能****************
        test: /\.m?js$/,
        exclude: /node_modules/,
        include: path.resolve('src'),
        use: {
          loader: 'babel-loader', // 用babel-loader把es6转为es5
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'] //@babel/preset-react解析react语法
          }
        }
      }
    ]
  },
  devServer: {
    port: 3000, // 打包后的输出端口
    progress: true, // 打包过程中的打包进度条
    contentBase: './dist', // 以./dist目录作为静态服务文件夹
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      title: 'webpack测试'
    }),
    // 如果从moment中引入了./local,就忽略掉****************
    new webpack.IgnorePlugin(/\.\/locale/, /moment/),
    // 引用dll插件，在打包文件目录里查找是否有manifest.json清单目录，没有再去模块中打包****************
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist', 'manifest.json')
    }),
    // 打包的时候输出文件夹dist目录中的所有文件都将被删除，但是目录不会删除 
    // new CleanWebpackPlugin(),
    new webpack.BannerPlugin('make L') // 版权声明，添加到打包输出后的js代码之前

  ]
}