webpack(一) 配置

一、entry  & output

mode: 'development',
  // entry: './src/index',
  // entry: ['./src/index', './src/pollyfill'],
  entry: {
    app: './src/index',
    pollyfill: './src/pollyfill.js'
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
　　 publicPath: '/',
  },

二、resolve

  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': path.join(__dirname, '../', 'src'),
    }
  },

三、懒加载

import() 原理是通过jsonp; 返回promise

const $el = document.createElement('div');
$el.className ='container';
$el.addEventListener('click', function(){
  import('./caltTest').then((res)=>{
    console.log(res.default);
  })
});
document.body.appendChild($el);

四、热更新

devServer中增加hotOnly:true

五、定义环境变量

new Webpack.DefinePlugin({
      ENV: 'true',
      // SERVE: "'https://www.baidu.com'",
      UAT: JSON.stringify('uat'),
    }),