异步代码拆分 Webpack - 意外令牌 [英] Async Code Splitting Webpack - Unexpected Token

问题描述

我只是按照这个

这是我的 webpack 文件:

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));模块.出口 = {入口: {主要:'./src/index.js',供应商:依赖},输出: {文件名:'[名称].js'，路径:path.resolve(__dirname, 'dist')},插件: [新的 webpack.optimize.CommonsChunkPlugin({名称:供应商"，minChunks:无穷大，}),new ExtractTextPlugin("styles.css"),新的 HtmlWebpackPlugin({模板:'index.html'})],模块: {规则: [{测试:/\.js?$/,使用:['babel-loader',],排除:/node_modules/},{测试:/\.css$/,使用:ExtractTextPlugin.extract({后备:样式加载器"，使用:css-loader"}),排除:/node_modules/},{测试:/(\.png|\.jpg|\.otf)$/,使用:['file-loader?name=[name].[ext]&publicPath=assets/&outputPath=assets/']}]},表现: {提示:警告"，//枚举maxAssetSize: 200000,//int (以字节为单位),maxEntrypointSize: 400000,//int(以字节为单位)资产过滤器:函数(资产文件名){//提供资产文件名的函数谓词return assetFilename.endsWith('.css') ||资产文件名.endsWith('.js');}},devtool: "source-map",//枚举目标:网络"，//枚举统计信息:仅限错误"，开发服务器:{proxy: {//后端开发服务器的代理 URL'/api': 'http://localhost:3000'},contentBase: path.join(__dirname, 'public'),//布尔值 |字符串 |数组，静态文件位置compress: true,//启用 gzip 压缩historyApiFallback: true,//true for index.html on 404, object for multiple pathshot: true,//热模块替换.依赖于 HotModuleReplacementPluginhttps: false,//true 为自签名，对象为证书颁发机构noInfo: true,//只有错误 &热重载警告//...}};

解决方案

对于 dynamin 导入，我使用了 babel-plugin-syntax-dynamic-import 库 - https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

安装后，您必须将 module.rules 集扩展为类似(只要您想混合使用 es2015 和 react):

模块:{规则: [{测试:/\.js?$/,用: {loader: 'babel-loader',选项: {预设:[['es2015'，反应"]]，插件:['syntax-dynamic-import']},},排除:/node_modules/},},

它在教程 https://webpack 中有描述.js.org/guides/code-splitting-async/#usage-with-babel 更详细.

I was just following this guide

I have this code:

import React, { PropTypes, Component } from 'react';

import('contact-page').then(() => {});

I get this output:

This is my webpack file:

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
        // ...
    }
};

解决方案

For dynamin import I'm using babel-plugin-syntax-dynamic-import library - https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

After installation you have to extend module.rules sets to something like (as long as you want to mix es2015 and react):

module: {
  rules: [
  {
    test: /\.js?$/,
    use: {
      loader: 'babel-loader',
      options: {
         presets: [['es2015', "react"]],
         plugins: ['syntax-dynamic-import']
      },
    },
    exclude: /node_modules/
  },
},

It is described in tutorial https://webpack.js.org/guides/code-splitting-async/#usage-with-babel more detailed.

这篇关于异步代码拆分 Webpack - 意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！