Javascript 异步代码拆分网页包-意外令牌
我只是在关注这个 我有以下代码:Javascript 异步代码拆分网页包-意外令牌,javascript,reactjs,webpack-2,Javascript,Reactjs,Webpack 2,我只是在关注这个 我有以下代码: import React, { PropTypes, Component } from 'react'; import('contact-page').then(() => {}); 我得到这个输出: 这是我的网页包文件: var webpack = require('webpack'); var packages = require('./package.json'); var path = require('path'); var Extrac
import React, { PropTypes, Component } from 'react';
import('contact-page').then(() => {});
我得到这个输出:
这是我的网页包文件:
var webpack = require('webpack');
var packages = require('./package.json');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var filterDependencies = ['normalize.css', 'font-awesome'];
var dependencies = Object.keys(packages.dependencies).filter(f => !filterDependencies.some(fd => fd === f));
module.exports = {
entry: {
main: './src/index.js',
vendor: dependencies
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity,
}),
new ExtractTextPlugin("styles.css"),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
module: {
rules: [
{
test: /\.js?$/,
use: [ 'babel-loader', ],
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
exclude: /node_modules/
},
{
test: /(\.png|\.jpg|\.otf)$/,
use: ['file-loader?name=[name].[ext]&publicPath=assets/&outputPath=assets/']
}
]
},
performance: {
hints: "warning", // enum
maxAssetSize: 200000, // int (in bytes),
maxEntrypointSize: 400000, // int (in bytes)
assetFilter: function (assetFilename) {
// Function predicate that provides asset filenames
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
devtool: "source-map", // enum
target: "web", // enum
stats: "errors-only",
devServer: {
proxy: { // proxy URLs to backend development server
'/api': 'http://localhost:3000'
},
contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
compress: true, // enable gzip compression
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
https: false, // true for self-signed, object for cert authority
noInfo: true, // only errors & warns on hot reload
// ...
}
};
对于dynamin导入,我使用的是
babel插件语法dynamic import
library-
安装后,您必须将模块.rules
集扩展为类似的内容(只要您想混合es2015并做出反应):
教程中将对此进行更详细的描述。
babel插件语法动态导入在webpack@3.0.0
module: {
rules: [
{
test: /\.js?$/,
use: {
loader: 'babel-loader',
options: {
presets: [['es2015', "react"]],
plugins: ['syntax-dynamic-import']
},
},
exclude: /node_modules/
},
},