我尝试从3迁移到webpack,我将加载器更改为规则,将System.import()
更改为import()
,升级所有软件包,从awesome-typescript-loader更改ts加载器并删除新的webpack.NamedModulesPlugin()
但是在构建过程中我遇到了这个错误:
ERROR in ./node_modules/sql-parser/lib/compiled_parser.js
Module parse failed: Invalid labeled declaration (394:26)
You may need an appropriate loader to handle this file type.
| lstack.length = lstack.length - n;
| }
| _token_stack: function lex() {
| var token;
| token = lexer.lex() || EOF;
@ ./node_modules/sql-parser/lib/parser.js 9:13-41
@ ./node_modules/sql-parser/lib/sql_parser.js
@ ./node_modules/sql-parser/index.js
@ ./src/reducers/bands.js
@ ./src/reducers/transients.js
@ ./src/reducers/index.js
@ ./src/main.js
@ multi babel-polyfill ./src/main
我该如何解决?
EDIT webpack.config.js
var path = require('path')
var webpack = require('webpack')
var paths = {
src: path.resolve(__dirname, '../src'),
test: path.resolve(__dirname, '../test'),
viewers: path.resolve(__dirname, '../src', 'components', 'viewers'),
vendor: path.resolve(__dirname, '../vendor'),
build: path.resolve(__dirname, '../build'),
dist: path.resolve(__dirname, '../dist'),
}
var config = {
entry: ['babel-polyfill', path.resolve(paths.src, 'main')],
output: {
path: paths.build,
pathinfo: true,
filename: 'js/[name].bundle.js',
chunkFilename: 'js/[id].bundle.js',
// publicPath: '/'
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
alias: {
'spread-view': path.resolve(paths.vendor, 'spread-view'),
spreadjs: path.resolve(paths.vendor, 'spreadjs'),
},
},
stats: {
colors: true,
reasons: true,
},
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.ts|\.tsx$/,
include: [paths.src, paths.test],
use: 'ts-loader',
},
{
// enforce: 'pre',
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
},
},
],
// use: 'source-map-loader',
// include: [paths.src, paths.test],
},
{
test: /\.jsx?$/,
include: [paths.src, paths.test],
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.json$/,
type: 'javascript/auto',
use: 'json-loader',
},
{
test: /\.yml$/,
type: 'javascript/auto',
use: ['json-loader', 'yaml-loader'],
},
{
test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /\/favicon.ico$/,
use: 'file-loader?name=media/[name].[hash:8].[ext]',
},
{
test: /\/favicon.ico$/,
include: paths.src,
use: 'file-loader?name=favicon.ico?[hash:8]',
},
{
test: /\.html$/,
use: 'html-loader?attrs=false', //link:href
},
// SQLite script loader
{
test: /\.sql$/,
use: 'sqlite-loader',
},
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
// new webpack.NamedModulesPlugin(),
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
}
module.exports = {
paths: paths,
config: config,
}
webpack.config.debug.js
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var merge = require('webpack-merge')
var config = require('./webpack.config').config
module.exports = merge.smart(config, {
bail: true,
devtool: 'inline-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('debug'),
},
}),
new HtmlWebpackPlugin({
inject: true,
template: 'index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
],
})