webpack的两个难点

webpack4目前已经开箱即用，常规用法可以读博客：https://juejin.im/post/5e5c65fc6fb9a07cd00d8838，根据博客一步一步测试，收获会不少，我花了3天测试完。

难点有两个:

1.除入口JS文件其他资源，html中其他资源，如：css(import导入)，图片，字体和流媒体，我一般的处理是：

1.1：库文件（js、css）引用放入模板中。不需要webpack构建。（用copy-webpack-plugin）直接把静态库文件copy到path目录中对应的文件。

1.2: 入口JS文件中的引用资源需要打包到指定的目录下： 使用(extract-text-webpack-plugin)，该插件的主要是为了抽离css样式，如果框架是vue,需要在rules中处理vue文件的options

配置解析css文件的modules中用extract-text-webpack-plugin.extract来处理：

options: {
      loaders: {
           css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' })
   }
}

接着在插件中设置抽离出来的css名字，

new ExtractTextPlugin({
    // 抽离的css名字，这里要注意路径，在output中publicPath拼接
    filename: ''[name].[contenthash:8].css",
    //  使用了extract，必须设置为true
    allChunks:true
})

打包可能发现css中的资源获取不到（目录资源为根路径），需要在output中配置publicPath即可。

第2个难点是抽离公用模块，参考：https://www.cnblogs.com/kwzm/p/10314438.html， 理解 webpack抽离的原理。基本上webpack的常规用法可以在项目中实战了，难点在于理解初始模块和异步模块；异步模块是包括在初始模块中的，异步模块也需要打成一个chunk包，在页面交互中加载异步模块chunk包，这在单页面应用很有用。