折腾：
期间，虽然用ExtractTextPlugin等插件，实现了css，less等的分离，但是结果是：
css是单独打包出来了：
但是JS文件中，却没有引用到此处的css了，
然后css样式丢失了，导致文字显示异常，和头像丢失了：
ExtractTextPlugin but css not work
ExtractTextPlugin but js not import css
ExtractTextPlugin webpack not load css
ExtractTextPlugin 作用
Output CSS to different directory with ExtractTextPlugin · Issue #1022 · webpack/webpack
Getting css output using webpack ExtractTextPlugin – Stack Overflow
Webpack 使用 ExtractTextPlugin 搭配 autoprefixer 的疑问 – 提问 – React 中文
webpack进阶之插件篇 – 小莫 – SegmentFault
blog/webpack关于样式的处理.md at master · zhengweikeng/blog
javascript – Webpack not loading css – Stack Overflow
Getting css output using webpack ExtractTextPlugin – Stack Overflow
其实这里也提到了，在html中要加上：
<link rel=”stylesheet” href=”/styles/styles.css”> |
Output CSS to different directory with ExtractTextPlugin · Issue #1022 · webpack/webpack
最后是搜：
参考之前的preact-boilerplate的配置文件，研究后，基本搞懂了：
其是在webpack.config.babel.js中配置了：
new HtmlWebpackPlugin({ template: ‘./index.ejs’, minify: { collapseWhitespace: true } }), |
从模板index.ejs：
输出了html到了目标文件夹，其中link了css文件，最后结果是：
所以才想到，去搜：
HtmlWebpackPlugin
看到了：
HtmlWebpackPlugin · webpack 中文文档(2.2)
提到了：
“如果你有任何CSS资源在webpack的 output 中，（例如，使用 ExtractTextPlugin提取的CSS）那么这些资源将被包含在HTML head 中，使用<link>标记引用。”
即：
此处用了ExtractTextPlugin后，css被提取到了output路径下后，记得要在html的head中加上引用对应的css的。
所以，此处就是：
去在已有的html文件中，加上对于（由于ExtractTextPlugin提取后输出到目标文件夹中的）css文件的引用：
不过由于此处写了多个ExtractTextPlugin的示例，所以先去还原为单个css的写法：
// import CopyWebpackPlugin from ‘copy-webpack-plugin’; var CopyWebpackPlugin = require(‘copy-webpack-plugin’); var path = require(‘path’); var webpack = require(‘webpack’); var ExtractTextPlugin = require(‘extract-text-webpack-plugin’); // const ENV = process.env.NODE_ENV || ‘development’; var isProd = (process.env.NODE_ENV === ‘production’); console.log(`process.env.NODE_ENV=${process.env.NODE_ENV}, isProd=${isProd}`); //process.env.NODE_ENV=development, isProd=false // 多个提取实例 // new ExtractTextPlugin(“[name].[hash].css”); // new ExtractTextPlugin(“[name].css”); // const extractCSS = new ExtractTextPlugin(‘stylesheets/[name].css’); // const extractLESS = new ExtractTextPlugin(‘stylesheets/[name].less’); let commonPlugins = [ // new webpack.ProvidePlugin({ // $: ‘jquery’, // ‘window.jQuery’: ‘jquery’, // jQuery: ‘jquery’, // ‘window.$’: ‘jquery’, // }), new webpack.optimize.CommonsChunkPlugin({ name: ‘vendor’, filename: ‘vendor.bundle.js’ }), // new webpack.HotModuleReplacementPlugin() new ExtractTextPlugin(‘styles.css’) // extractCSS, // extractLESS ]; if (isProd) { // Note: current not add UglifyJsPlugin for production for: // when webpack -p, it will auto added UglifyJsPlugin, then omit here UglifyJsPlugin settings // commonPlugins.push( // new webpack.optimize.UglifyJsPlugin({ // minimize: true // }) // ); commonPlugins.push( new CopyWebpackPlugin([ { from: ‘./index.html’ }, { from: ‘src/assets’, to: ‘dist’ }, ]) ); } module.exports = { entry: { index: ‘./src/index.js’, vendor : [ ‘babel-polyfill’, // Set up an ES6-ish environment ‘react-hot-loader/patch’, ‘./src/adminlte_app.js’ ], }, output: { path: path.resolve(__dirname, ‘build’), filename: ‘[name].js’, publicPath: ‘/adminlte/’ }, // devtool: isProd ? ‘cheap-module-source-map’ : ‘eval’, devtool: isProd ? ‘false’ : ‘eval’, devServer: { // hot: true, contentBase: path.resolve(__dirname, ‘build’), publicPath: path.resolve(__dirname, ‘/adminlte/’), // publicPath: path.resolve(__dirname, ‘/devServerPublicPath/’), compress: true, port: 3000, historyApiFallback: true }, plugins: commonPlugins, module: { rules: [ { test: /\.jsx?$/, // 匹配’js’ or ‘jsx’ 后缀的文件类型 // use: [‘react-hot-loader’, ‘babel-loader’], include: path.resolve(__dirname, ‘src’), // exclude: /(node_modules|bower_components)/, exclude: [ path.resolve(__dirname, ‘node_modules’), path.resolve(__dirname, ‘bower_components’) ], // use: ‘babel-loader’, use: { loader: ‘babel-loader’, options: { presets: [‘env’, ‘stage-0’, ‘react’], plugins: [‘transform-runtime’, ‘react-hot-loader/babel’] } } }, { test: /\.css$/, // use: [‘style-loader’, ‘css-loader’], // use: [ // { loader: ‘style-loader’ }, // { // loader: ‘css-loader’, // options: { // modules: true // } // } // ], use: ExtractTextPlugin.extract({ fallback: ‘style-loader’, // 编译后用什么loader来提取css文件 use: ‘css-loader’ // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader }), // use: extractCSS.extract([ ‘css-loader’, ‘postcss-loader’ ]), // use: extractCSS.extract([ // ‘css-loader’, // { // loader: ‘postcss-loader’, // options: { // // plugins: () => [require(‘autoprefixer’)] // } // } // ]), include: path.resolve(__dirname, ‘src’) }, { test: /\.less$/, use: [ { loader: ‘style-loader’ // creates style nodes from JS strings }, { loader: ‘css-loader’ // translates CSS into CommonJS }, { loader: ‘less-loader’ // compiles Less to CSS } ] // test: /\.less$/i, // use: extractLESS.extract([ ‘css-loader’, ‘less-loader’ ]) }, { test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)$/i, //development use url-loader, production use file-loader use : // use: isProd ? // { // loader: ‘file-loader’, // query: { // // name: ‘[path][name].[ext]?[md5:hash:base64:6]’ // //name: ‘[path][name]_[md5:hash:base64:6].[ext]’ // name: ‘[name]_[md5:hash:base64:6].[ext]’ // } // } : { loader: ‘url-loader’, query: { // inline base64 DataURL for <=2KB images, direct URLs for the rest // limit: 4096, limit: 2048, // name: ‘[name]_[md5:hash:base64:6].[ext]’ name: ‘dist/img/[name]_[md5:hash:base64:6].[ext]’ // prefix: ‘/adminlte/’ } } } ] }, resolve: { // you can now import file without suffix extensions: [‘*’, ‘.jsx’, ‘.js’, ‘.json’, ‘.less’] } }; |
npm run build去：
生成单个css：
然后给html中加上css引用：
然后再去调试看看，是否可以正常加载css
的确是可以了：
【总结】
此处之所以是在ExtractTextPlugin提取出css文件后，此处html页面，丢失了样式，没有加载css，是因为：
没有在对应的html中加上引用该（通过ExtractTextPlugin提取生成的）css文件。
解决办法：
去html中加上引用该css：
<!– link ExtractTextPlugin generated css –> <link rel=”stylesheet” href=”styles.css”> |
即可。
注：
1.当然，如果后期用了ExtractTextPlugin的多个实例，生成多个css文件后，也要改为html中link引用对应的多个css文件。
2.其他项目中，之所以没有手动去加上link这些css，其实是通过HtmlWebpackPlugin生成对应的html中，或者是在HtmlWebpackPlugin所用到的模版（比如之前的那个index.ejs中）就用类似于：
<% for (var chunk in htmlWebpackPlugin.files.css) { %> <link rel=”preload” href=”<%= htmlWebpackPlugin.files.css[chunk] %>” as=”style”> <% } %> |
的代码去引用了css文件了-》所以生成的html中也就自动引用了对应的css文件了。
转载请注明：在路上 » 【已解决】ReactJS中Webpack用ExtractTextPlugin后导致css丢失JS中没有加载出来