Webpack 网页包赢得';不生成外部css文件
我的网页包安装程序不会生成外部css文件。不过,它捆绑了我的.js。我正在使用ExtractTextPlugin,但它仍然不起作用。不会生成任何错误。任何帮助都将不胜感激!:-) 这是我的webpack.config.jsWebpack 网页包赢得';不生成外部css文件,webpack,webpack-style-loader,Webpack,Webpack Style Loader,我的网页包安装程序不会生成外部css文件。不过,它捆绑了我的.js。我正在使用ExtractTextPlugin,但它仍然不起作用。不会生成任何错误。任何帮助都将不胜感激!:-) 这是我的webpack.config.js var ExtractTextPlugin = require('extract-text-webpack-plugin'); var path = require('path'); module.exports = { entry: './client/app/
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')
]
};
"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"
}
Package.json开发依赖项
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')
]
};
"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'
],
您也可以只需要JavaScript文件中的.less代码,并且只有一个入口点。