针对上篇gojs太大的问题的衍生出大文件打包的问题javascript
写成从node_modules导入的,就不会出现run慢或者报错,还很快。这是为何?
是由于node_modules里面不会再实时编译了
那有没有方法,webpack能够设置一些不实时编译的文件html
{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src')], exclude:[ resolve("src/components/common/gojs") ] },
exclude能够排除目录 ,不用babel-loader编译java
库很大,要么分包 ,或异步加载,或单独引入,不然生成环境打的包会很大node
打包的时候不打包这个,而后须要在生产环境页面单独引入这个scriptwebpack
externals:{ 'go':'go' }
<script type="text/javascript" src="./static/js/go.js"></script>
add-asset-html-webpack-plugin,能够配置修改打包后的index.html.
在webpack.prod.config中引入并添加,用法以下:web
new AddAssetHtmlPlugin({ filepath:path.join(__dirname,'src/components/common/gojs/go.js'), outputPath:'./static/js', publicPath:'./static/js',//script标签中的路径前缀 includeSourcemap:false })
打包后结果以下:babel
</div></div> <script type="text/javascript" src="./static/js/go.js"></script>
分包等的时间久点app
var chunks = ['manifest', 'vendor', 'gojs', 'app']; new webpack.optimize.CommonsChunkPlugin({ name: 'gojs', minChunks (module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /go\.js$/.test(module.resource) === 0 ) } }), new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunks, chunksSortMode: function(a, b) { return chunks.indexOf(a.names[0]) - chunks.indexOf(b.names[0]) }, }),