The packaging posture of webpack2 may be wrong, and the transcoding compatibility is not very good. The following is my webpack.config.js configuration file (some irrelevant ones are omitted):
/**
* webpack本地配置
* Less 2017-6-15 2:00
*/
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CompressionPlugin = require('compression-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// var BabiliPlugin = require("babili-webpack-plugin");
// 下面這幾個require也寫到了入口文件main.js最上面去了
require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
require('core-js/fn/object/assign');
require( "babel-polyfill");
var config = {
entry: path.resolve(__dirname, '../../react/main.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../../view'),
publicPath: `${NGINX}`
},
module: {
rules: [{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: path.join(__dirname, '../../react'),
options: {
presets: ["es2015", "react", "stage-0", "stage-1"]
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&importLoaders=1&localIdentName=[local]--[hash:base64:5]',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
]
})
}, {
test: /\.(png|jpg|jpeg|gif|md)$/,
use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: ['url-loader?limit=10000&mimetype=image/svg+xml']
}],
},
plugins
}
module.exports = config;
Running on Huawei p7 mobile phone, the console displays:
Uncaught SyntaxError: Unexpected token . bundle.js:10541
// 定位到這一段代碼:
const config = {
baseConfig: __webpack_require__(280)(`./${nodeEnv}/config`)
}
Obviously the string template feature of ES6 has not been converted to ES5 syntax, why?
Don’t know how to transfer better? Please ask the master of segmentfault for an answer, 3Q~
歡迎選擇我的課程,讓我們一起見證您的進步~~
Added in
bablerc
{
"plugins": [
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
]
}