Webpack 不会生成外部 css 文件
Webpack won't generate external css file
我的 webpack 安装程序不会生成外部 css 文件。但是,它很好地捆绑了我的 .js。我正在使用 ExtractTextPlugin,但它仍然无法正常工作。不会产生任何错误。任何帮助将不胜感激! :-)
这是我的webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: './client/app/root.js',
output: {
path: path.resolve('./client/dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
watch: true,
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin('styles.css')
]
};
Package.json 开发依赖项
"devDependencies": {
"babel-core": "6.0.20",
"babel-eslint": "4.1.3",
"babel-loader": "6.0.1",
"babel-preset-es2015": "6.0.15",
"babel-preset-react": "6.0.15",
"babel-preset-stage-0": "6.0.15",
"eslint-plugin-react": "3.6.2",
"freezer-redux-devtools": "^1.1.0",
"css-loader": "^0.15.5",
"extract-text-webpack-plugin": "^0.8.2",
"less": "^2.5.1",
"less-loader": "^2.2.0",
"redux-devtools": "^2.1.5",
"style-loader": "^0.12.3",
"webpack": "^1.9.10",
"webpack-dev-server": "^1.14.0"
}
文件夹结构:
client
--> app
--> dist
--> public
--> styles
我明白了。现在工作! :-) 我需要像这样设置多个入口点:
entry: [
'./client/app/root',
'./client/styles/styles.less'
],
我的 webpack 安装程序不会生成外部 css 文件。但是,它很好地捆绑了我的 .js。我正在使用 ExtractTextPlugin,但它仍然无法正常工作。不会产生任何错误。任何帮助将不胜感激! :-)
这是我的webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: './client/app/root.js',
output: {
path: path.resolve('./client/dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
watch: true,
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin('styles.css')
]
};
Package.json 开发依赖项
"devDependencies": {
"babel-core": "6.0.20",
"babel-eslint": "4.1.3",
"babel-loader": "6.0.1",
"babel-preset-es2015": "6.0.15",
"babel-preset-react": "6.0.15",
"babel-preset-stage-0": "6.0.15",
"eslint-plugin-react": "3.6.2",
"freezer-redux-devtools": "^1.1.0",
"css-loader": "^0.15.5",
"extract-text-webpack-plugin": "^0.8.2",
"less": "^2.5.1",
"less-loader": "^2.2.0",
"redux-devtools": "^2.1.5",
"style-loader": "^0.12.3",
"webpack": "^1.9.10",
"webpack-dev-server": "^1.14.0"
}
文件夹结构:
client
--> app
--> dist
--> public
--> styles
我明白了。现在工作! :-) 我需要像这样设置多个入口点:
entry: [
'./client/app/root',
'./client/styles/styles.less'
],