我是webpack 2的新手并且它是延迟加载的,到目前为止我已经创建了没有延迟加载和代码拆分的项目,但是现在想要将我的代码拆分成块并使用React Router进行系统导入 . 我根据this文章创建了React Router部分
这个webpack 2配置文件如下 .
let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')),
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
}
});
let extractSCSS = new ExtractTextPlugin('[name].css')
module.exports = {
context: __dirname,
entry: {
bundle: './src/app/app-client.jsx',
styles: './src/app/sass/main.scss',
vendor: [
'react', 'react-dom'
]
},
output: {
filename: '[name].js',
chunkFilename: 'chunk.[id].[chunkhash:8].js',
path: './src/build',
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'cheap-module-source-map',
module : {
rules : [
{
test: /\.scss$/,
loader: extractSCSS.extract(['css-loader','sass-loader'])
},
{
test: /\.jsx?$/,
exclude: [/node_modules/, /libs/],
use: {
loader: "babel-loader",
query: {
presets: ['es2015', 'react', 'stage-2' ],
plugins: [ "transform-runtime" ]
}
}
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
use: {
loader:'file-loader'
}
}
]
},
plugins: [
extractSCSS,
devFlagPlugin,
new webpack.optimize.CommonsChunkPlugin({
name: 'bundle',
children: true,
async: true,
minChunks: 2
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
async: true,
minChunks: 2
})
]
}
但是webpack只创建了两个文件,vendor和bundle,在我分离React和React DOM后,bundle的大小也没有减少 .
这是我的路线 .
import App from './App.jsx';
function errorLoading(err) {
console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
return (module) => cb(null, module.default);
}
export default {
component: App,
childRoutes: [
{
path: 'stock/info/:symbol(/:tab)',
getComponent(location, cb) {
System.import('./StockPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
{
path: '*',
getComponent(location, cb) {
System.import('./NoMatch')
.then(loadRoute(cb))
.catch(errorLoading);
}
}
]
};
我的应用程序运行,但延迟加载当然不起作用,因为我在 System.import
中没有我的模块块 .
请帮我创建正确的webpack配置以实现我的应用程序!如果有些事情是无稽之谈,请提前致谢并对不起,因为我是webpack的新手 .
1 回答
Webpack2从System.import()切换到import()以匹配当前建议的javascript功能 . 现在正处于第3阶段 .
因此,您应该能够更改您的webpack配置以包含STAGE-3
或动态导入插件
然后改变你的路线
有关使用import进行代码拆分和延迟加载的完整文档,请参阅此处的webpack2帮助页面 . https://webpack.js.org/guides/migrating/#code-splitting-with-es2015 https://github.com/tc39/proposal-dynamic-import
要启用Webpack2树摇动,只需要对您的babel设置进行一次更改 .
变
这是我发现的关于树木的文章:https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#.lv3ldgfhs