[英]Not able to combine all css files with bundle.css with webpack like bundle.js
我試圖通過reactjs中的webpack將我的css文件合並到bundle.css中,我能夠在bundle.js中添加所有JS文件,但不能將所有css文件合並到bundle.css中。 有src目錄,其中包含所有componet(js文件)代碼。 並且有包含所有css文件的公共目錄。 有人可以幫忙嗎
我的webpack.config.js是
require('es6-promise').polyfill();
require('babel-polyfill');
var webpack = require('webpack');
var path = require('path');
// for js
var BUILD_DIR = path.resolve(__dirname, 'public/js');
var APP_DIR = path.resolve(__dirname, 'src');
// for html
var PUBLIC_DIR = path.resolve(__dirname, 'public');
// for css
var CSS_DIR = path.resolve(__dirname, 'public/css');
var CSS_BUILD_DIR = path.resolve(__dirname, 'public/css');
var combineLoaders = require('webpack-combine-loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: {
'js':['babel-polyfill',APP_DIR + '/app.js'],
//'html': PUBLIC_DIR+'/index.html',
'css' : [
CSS_DIR +'/bootstrap.min.css',
CSS_DIR +'/appointment.css',
CSS_DIR +'/menu.css',
CSS_DIR +'/default.css',
CSS_DIR +'/style.css',
CSS_DIR +'/react-datepicker.css',
CSS_DIR +'/react-day-picker.css',
CSS_DIR +'/notifications.css',
CSS_DIR +'/react-intl-tel-input.css',
CSS_DIR +'/slicknav.min.css'
]
},
output: {
path: BUILD_DIR,
filename: 'bundle.js',
path: CSS_BUILD_DIR,
filename: 'bundle.css',
},
plugins: [
//new ExtractTextPlugin('styles-[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('local')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin()
],
module: {
loaders: [{
test : /\.js?/,
include : APP_DIR,
exclude: /(node_modules)/,
loader : 'babel-loader',
options: {
minimize: true
},
query: {
plugins: ['transform-object-assign']
}
},
{
test: /.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.css?$/,
loader: 'style!css' // This are the loaders
},
{
test: /\.css$/,
loaders: ExtractTextPlugin.extract(
combineLoaders([{
loader: 'css-loader',
options: {
minimize: true
},
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}])
)
}]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}
};
module.exports = config;
index.html
<html>
<head>
<title>My APP</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!--Stylesheet-->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/appointment.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/react-datepicker.css">
<link rel="stylesheet" href="css/react-day-picker.css">
<link rel="stylesheet" href="css/notifications.css">
<link rel="stylesheet" href="css/react-intl-tel-input.css">
<link rel="stylesheet" href="css/slicknav.min.css"/>
//<link rel="stylesheet" href="css/bundle.css"/>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxf2BKbwAcqylDnCKWFuV8q3qlS5tNtcI&libraries=placeses,visualization,drawing,geometry,places"></script>
</head>
<body class="home">
<div id="root"></div>
<!--Bundled file-->
<script src="js/bundle.js"></script>
</body>
</html>
首先,Webpack不支持多個輸出。 因此,在webpack.config.js
文件中僅包含js
文件路徑。
output: {
path: BUILD_DIR,
filename: 'bundle.js'
}
現在,對於您的css
文件,不要在html
文件中包含它,而應在輸入文件app.js
包含它
例如:
import React, {Component} from 'react';
import RoutesComponent from './routes';
import {BrowserRouter} from 'react-router-dom'
//import all your css files here only
import 'bootstrap/dist/css/bootstrap.css';
import './public/css/menu.css';
class App extends Component {
render() {
return (
<BrowserRouter>
<RoutesComponent/>
</BrowserRouter>
)
}
}
export default App;
希望對您有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.