webpack include 和 exclude的配置问题 #121
Description
直接在页面中如下引入
import { Modal } from 'rctui';
webpack报错很多下面为部分内容
ERROR in ./node_modules/rctui/Datepicker/Datetime.js
Module parse failed: /Users/rox/Desktop/xstar-center-fe/node_modules/rctui/Datepicker/Datetime.js Unexpected token (205:6)
You may need an appropriate loader to handle this file type.
|
| return (
| <div className={_datepickers.timeContainer}>
| <Clock current={current} active={!!timeStage}
| stage={timeStage}
@ ./node_modules/rctui/Datepicker/index.js 3:0-33
@ ./node_modules/rctui/index.js
@ ./src/components/common/CommonModal.jsx
@ ./src/containers/Fund/index.jsx
@ ./src/routes/fundSubroutes.js
@ ./src/routes/index.js
@ ./src/containers/index.jsx
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill ./libs/charting_library.min.js ./src
ERROR in ./node_modules/rctui/Datepicker/Range.js
Module parse failed: /Users/rox/Desktop/xstar-center-fe/node_modules/rctui/Datepicker/Range.js Unexpected token (41:55)
You may need an appropriate loader to handle this file type.
|
| render () {
| const { className, value, min, max, con, hasError, ...other } = this.props
|
| const type = other.type.replace('-range', '')
@ ./node_modules/rctui/index.js 9:0-62 10:0-63
@ ./src/components/common/CommonModal.jsx
@ ./src/containers/Fund/index.jsx
@ ./src/routes/fundSubroutes.js
@ ./src/routes/index.js
@ ./src/containers/index.jsx
@ ./src/index.jsxy @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill ./libs/charting_library.min.js ./src
参考这个问题web-dev-server时遇到下列问题好像是
exclude的地方添加了/node_modules/,于是在webpack中改为如下配置然后报下面的错
{
test: /\.jsx?$/,
loader: 'happypack/loader?id=js',
exclude: /node_modules/,
include: ['/node_modules/rctui']
},
ERROR in ./src/index.jsx
Module parse failed: /Users/roxy/Desktop/xstar-center-fe/node_modules/eslint-loader/index.js??ref--0!/Users/rox/Desktop/xstar-center-fe/src/index.jsx Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <Container />,
| document.getElementById('app'),
| );
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill ./libs/charting_library.min.js ./src
请问这样该如何解决
webpack的配置如下
module.exports = env => ({
entry: {
app: ['babel-polyfill', './src'],
},
output: {
path: `${__dirname}/dist`,
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
},
module: {
rules: [
{
enforce: 'pre',
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: env === 'development',
},
}, {
test: /\.jsx?$/,
loader: 'happypack/loader?id=js',
exclude: /node_modules/,
include: ['/node_modules/rctui'],
},
{
test: /\.(css)$|\.(scss)$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'happypack/loader?id=css',
}),
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.ico$|\.svg$|\.eot$|\.woff$|\.ttf$/,
loader: 'url-loader',
options: {
limit: '10000',
name: '[name].[hash:5].[ext]',
},
},
{
test: /\.styl$/,
use: extractStylus.extract({
fallback: 'style-loader',
use: [
'css-loader',
{ loader: 'postcss-loader', options: { sourceMap: true } },
'stylus-loader',
],
}),
},
],
noParse: [/moment.js/],
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.jsx'],
},
target: 'web',
devServer: {
proxy: {
'/api': {
target: process.env.DEV_SERVER_PROXY,
secure: false,
},
},
setup(app) {
app.use('/charting_library', express.static('libs/'));
},
port: process.env.DEV_SERVER_PORT,
historyApiFallback: true,
hot: true,
},
plugins: [
...env === 'development' ? [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.join(__dirname, 'dll', 'bundle-manifest.json'),
}),
new AddAssetHtmlPlugin({
filepath: require.resolve((`${__dirname}/dll/bundle.dll.js`)),
hash: true,
includeSourcemap: false,
}),
] : [],
new webpack.EnvironmentPlugin(Object.keys(process.env)),
new webpack.NormalModuleReplacementPlugin(/element-react[/\\]src[/\\]locale[/\\]lang[/\\]zh-CN/, 'element-react/src/locale/lang/en'),
new CleanWebpackPlugin('./dist', {
verbose: env === 'production',
dry: env === 'development',
}),
new HtmlWebpackPlugin({
favicon: './src/styles/images/favicon.ico',
template: './src/index.html',
hash: env === 'production',
}),
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true,
disable: env === 'development',
}),
extractStylus,
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ context }) => context && context.includes('node_modules'),
}),
new webpack.optimize.UglifyJsPlugin({
output: { comments: false },
}),
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: env === 'dev' ? [
{
path: 'react-hot-loader',
}, {
path: 'babel-loader',
},
] : [
{
path: 'babel-loader',
options: {
cacheDirectory: env === 'development',
},
},
],
}),
new HappyPack({
id: 'css',
threadPool: happyThreadPool,
loaders: [
{
path: 'css-loader',
}, {
path: 'postcss-loader',
}, {
path: 'stylus-loader',
}, {
path: 'sass-loader',
},
],
}),
],
});