webpack4 学习7

Webpack 优化
每次打包后 entry.js文件都比较大，是因为打包把第三方框架也搭进去了
优化:
在入口文件里
配置第三方类库
entry:{
entry:’./src/entry.js’,
jquery:’jquery’
}
在组件配置里添加组件
new webpack.optimize.CommonsChunkPlugin({
name:’jquery’,//单独抽离的入口文件
filename:’assets/js/jquery.js’//抽离到静态文件下的jquerywenjian 
minChunks:2//最小抽离出俩个文件
})
该方式已被废弃
使用新方式
2、

optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendors',
        },
        'async-vendors': {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          name: 'async-vendors'
        }
      }
    },
    runtimeChunk: { name: 'runtime' }
  },
22、静态资源集中输出
public 的静态资源打包
安装插件
copy-webpack-plugin
引入
const copyWebpackPlugin = require('copy-webpack-plugin');
new copyWebpackPlugin([
    {
        from:__dirname+'/src/public',//当前目录src下的public
        to:'./public'//到dist 下的public下    }
]),

23、
配置使用json 文件引入
创建一个config.json
var json = require('../config.json');
$('#json').html(json.name);

24、学习之路