之前调试期间发现，css的style是被webpack生成后放到html中的：

后来看到很多资料后得知，单独把css提取出来，是需要用到单独的插件的。

参考：

去试试

ExtractTextPlugin css 作用

ExtractTextPlugin   作用

“一般来说需要引入css-loader和style-loader，其中css-loader用于解析，而style-loader则将解析后的样式嵌入js代码。

将require引入的样式嵌入js文件中，有好处也有坏处。好处是减少了请求数，坏处也很明显，就是当你的样式文件很大时，造成编译的js文件也很大。

我们可以使用插件的方式，将样式抽取成独立的文件。使用的插件就是extract-text-webpack-plugin”

但是后续有很多复杂的说法，目前实在是搞不懂，先不理会。➜  react-hot-boilerplate git:(master) ✗ npm install extract-text-webpack-plugin –save-dev

npm WARN babel-loader@6.2.10 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

npm WARN react-dom@15.6.1 requires a peer of react@^15.6.1 but none was installed.

added 3 packages in 10.823s

目前用：var ExtractTextPlugin = require("extract-text-webpack-plugin");

new ExtractTextPlugin("styles.css") //将css打包成单独的文件style.css

{

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

}),

include: path.resolve(__dirname, ‘src’)

},

试试效果：

对于已有的一个css文件来说，的确起效果了：

输出时就有：Child extract-text-webpack-plugin ../../../../../../../xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/extract-text-webpack-plugin/dist ../../../../../../../xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/css-loader/index.js!../../../../../../../xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/src/app.css:

1 asset

[0] ./node_modules/css-loader!./src/app.css 548 bytes {0} [built]

[2] ./src/assets/img/user1-128×128.jpg 79 bytes {0} [built]

+ 1 hidden module

然后最终输出到build的文件夹中也有对应的文件：

然后再去参考：

给less也加上对应的写法：➜  react-hot-boilerplate git:(master) ✗ npm install –save-dev postcss-loader

npm WARN babel-loader@6.2.10 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

npm WARN react-dom@15.6.1 requires a peer of react@^15.6.1 but none was installed.

added 19 packages in 11.682s

配置写法：var ExtractTextPlugin = require("extract-text-webpack-plugin");

// 多个提取实例

//new ExtractTextPlugin("[name].[hash].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

];

module.exports = {

plugins: commonPlugins,

module: {

rules: [

…

{

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’ ]),

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’ ])

},

}

然后去build看看效果。

期间：

但是结果又出现其他错误：

结果，更郁闷的来了：

虽然可以正常npm run dev了：

但是，连调试都无法调试了：

和：

都无法访问了。。。

然后去：

npm run build➜  react-hot-boilerplate git:(master) ✗ npm run build

> react-hot-boilerplate@1.0.0 prebuild /Users/crifan/dev/dev_root/daryun/Projects/xxxsourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate

> npm run clean

> react-hot-boilerplate@1.0.0 clean /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate

> rm -rf build/ build.zip

> react-hot-boilerplate@1.0.0 build /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate

> cross-env NODE_ENV=production webpack -p –progress –colors

process.env.NODE_ENV=production, isProd=true

Hash: 684ce2244b76de7df4b1

Version: webpack 3.5.4

Time: 23788ms

Asset       Size  Chunks                    Chunk Names

dist/img/boxed-bg.png    43.7 kB          [emitted]

dist/img/user1-128x128_vykxhX.jpg    2.88 kB          [emitted]

vendor.bundle.js     102 kB       1  [emitted]         vendor

stylesheets/index.css  375 bytes       0  [emitted]         index

index.html    2.55 kB          [emitted]

dist/.DS_Store    6.15 kB          [emitted]

dist/img/avatar3.png    9.78 kB          [emitted]

dist/img/avatar2.png    8.84 kB          [emitted]

dist/img/avatar5.png    8.01 kB          [emitted]

dist/img/avatar.png    8.54 kB          [emitted]

dist/img/.DS_Store    6.15 kB          [emitted]

dist/img/avatar04.png      14 kB          [emitted]

dist/img/credit/american-express.png    2.21 kB          [emitted]

dist/img/credit/cirrus.png    1.59 kB          [emitted]

dist/img/boxed-bg.jpg     124 kB          [emitted]

index.js    1.12 MB       0  [emitted]  [big]  index

dist/img/credit/mastercard.png    1.59 kB          [emitted]

dist/img/credit/paypal.png    2.05 kB          [emitted]

dist/img/credit/mestro.png    1.59 kB          [emitted]

dist/img/credit/paypal2.png    1.37 kB          [emitted]

dist/img/user1-128×128.jpg    2.88 kB          [emitted]

dist/img/credit/visa.png    1.14 kB          [emitted]

dist/img/icons.png    1.15 kB          [emitted]

dist/img/default-50×50.gif  184 bytes          [emitted]

dist/img/user4-128×128.jpg    3.48 kB          [emitted]

dist/img/user2-160×160.jpg    7.07 kB          [emitted]

dist/img/user3-128×128.jpg    3.51 kB          [emitted]

dist/img/user5-128×128.jpg    6.45 kB          [emitted]

dist/img/user8-128×128.jpg    5.06 kB          [emitted]

dist/img/user6-128×128.jpg    4.34 kB          [emitted]

dist/img/user7-128×128.jpg    6.43 kB          [emitted]

[166] (webpack)/buildin/global.js 509 bytes {1} [built]

[464] ./src/index.js 590 bytes {0} [built]

[553] ./src/App.js 14.7 kB {0} [built]

[965] ./src/app.css 41 bytes {0} [built]

[966] multi babel-polyfill react-hot-loader/patch ./src/adminlte_app.js 52 bytes {1} [built]

[1175] ./src/adminlte_app.js 22.6 kB {1} [built]

[1177] ./src/assets/img/user1-128×128.jpg 79 bytes [built]

+ 1171 hidden modules

Child extract-text-webpack-plugin ../../../../../../../xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/extract-text-webpack-plugin/dist ../../../../../../../xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/css-loader/index.js!../../../../../../../xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/postcss-loader/lib/index.js!../../../../../../../xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/src/app.css:

1 asset

[0] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/app.css 548 bytes {0} [built]

[2] ./src/assets/img/user1-128×128.jpg 79 bytes {0} [built]

+ 1 hidden module

> react-hot-boilerplate@1.0.0 postbuild /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate

> npm run package

> react-hot-boilerplate@1.0.0 package /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate

> zip -r build.zip build/

adding: build/ (stored 0%)

adding: build/dist/ (stored 0%)

adding: build/dist/.DS_Store (deflated 93%)

adding: build/dist/img/ (stored 0%)

adding: build/dist/img/.DS_Store (deflated 97%)

adding: build/dist/img/avatar.png (stored 0%)

adding: build/dist/img/avatar04.png (stored 0%)

adding: build/dist/img/avatar2.png (stored 0%)

adding: build/dist/img/avatar3.png (stored 0%)

adding: build/dist/img/avatar5.png (stored 0%)

adding: build/dist/img/boxed-bg.jpg (deflated 7%)

adding: build/dist/img/boxed-bg.png (deflated 0%)

adding: build/dist/img/credit/ (stored 0%)

adding: build/dist/img/credit/american-express.png (stored 0%)

adding: build/dist/img/credit/cirrus.png (stored 0%)

adding: build/dist/img/credit/mastercard.png (stored 0%)

adding: build/dist/img/credit/mestro.png (stored 0%)

adding: build/dist/img/credit/paypal.png (stored 0%)

adding: build/dist/img/credit/paypal2.png (stored 0%)

adding: build/dist/img/credit/visa.png (stored 0%)

adding: build/dist/img/default-50×50.gif (deflated 7%)

adding: build/dist/img/icons.png (deflated 2%)

adding: build/dist/img/user1-128×128.jpg (deflated 5%)

adding: build/dist/img/user1-128x128_vykxhX.jpg (deflated 5%)

adding: build/dist/img/user2-160×160.jpg (deflated 3%)

adding: build/dist/img/user3-128×128.jpg (deflated 5%)

adding: build/dist/img/user4-128×128.jpg (deflated 0%)

adding: build/dist/img/user5-128×128.jpg (deflated 2%)

adding: build/dist/img/user6-128×128.jpg (deflated 3%)

adding: build/dist/img/user7-128×128.jpg (deflated 2%)

adding: build/dist/img/user8-128×128.jpg (deflated 3%)

adding: build/index.html (deflated 68%)

adding: build/index.js (deflated 69%)

adding: build/stylesheets/ (stored 0%)

adding: build/stylesheets/index.css (deflated 39%)

adding: build/vendor.bundle.js (deflated 68%)

之后

再去打开：

或：

都还是可以正常调试的。

但是css是丢失了：

所以是：

虽然是把css分离了，结果却丢失了。。。

所以要继续解决：

【总结】

至此，也就基本上实现了，通过ExtractTextPlugin插件去从css(甚至less，sass等文件)中提取出来最终的css文件，输出到output.path的文件夹中了。

然后通过确保html中link引用了这些css文件后，就可以正常生效了。

然后附上此处的，单个实例的ExtractTextPlugin的配置：// 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’]

}

};

供参考。

至于多实例的ExtractTextPlugin，以后有了更多的css，less等文件后，再继续折腾。

webpack 分离css html,【已解决】ReactJS中Webpack打包时分离css相关推荐

  1. css的背景图片不显示,wepback打包时，css的背景图片显示不出来，求教！

    如题.项目环境使用 webpack 构建的,webpack 这块配置的相关代码是 module: { loaders: [ { test: /\.(js|jsx)$/, exclude: /node_ ...

  2. idea中 maven打包时时报错User setting file does not exist C:\Users\lenevo\.m2\setting.xml，

    第一种错误 :idea中 maven打包时时报错User setting file does not exist C:\Users\lenevo\.m2\setting.xml, 解决方案如下:将ma ...

  3. 解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory...

    解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 如上图所示:频繁出现此 ...

  4. 解决Word2010中插入图片时变成空白框问题

    前一段时间系统提示内存不够,后来在Word2010/2007中点击"插入-图片"向文档中添加图片时,图片仅显示为空白边框?为什么会这样呢? 当内存不够或者 Word 程序崩溃时,可 ...

  5. 【已解决】Html Webpack Plugin Error；html-withimg-loader无法正常解析html内的img

    升级webpack之后发现原本之前用的好好的配置报错了: 控制台报错: ERROR in Error: Parse Error: <img src={"default":&q ...

  6. QT 触控事件和鼠标事件的分离（问题已解决）

    问题:QT图形视图框架,QGraphicsScene中默认接收触控事件,会将第一个点当作鼠标事件处理. 在开发者开发的时候,可能会有这样的需求,希望自己的触控事件和鼠标事件能够分割开来. 找到的解决方 ...

  7. php 静态 成员属性,[已解决]php中静态成员方法和静态成员变量是不是不支持多态？...

    各位大神好,我实现了一个日志工具基类,并派生了两个子类,一个是运维日志类,一个是业务日志类,并在基类中设置了一个静态变量希望能用以区分两个子类,但在调用静态方法时,实际上完全不是想象中的情况,代码如下 ...

  8. [已解决]Keil 中出现No Browse Information available in ‘工程文件‘的

    在查看程序时想要Go to Definition of  'xxx' 但是会出现如图所示的提醒: 解决方法: 点击魔术棒,再在Output的选项中勾选Browse Information,如此就可以正 ...

  9. linux少了 dev dm设备,已解决: Linux中安装了powerpath之后为什么还会有dm设备？ - Dell Community...

    在RHEL6.3中安装了powerpath5.7之后,OS上已经正确生成了emcpower磁盘设备(使用CX4-240存储),并配置到LVM中使用.但是今天发现,使用iostat命令时,可以看到dm设 ...

  10. 【已解决】LaTeX使用natbib时，在正文使用authoryear格式，但是在reference中使用数字编号

    文章目录 前言 方案 小结 参考文献 前言 如题,给出解决方案.关键在于:\setcitestyle{numbers} 方案 \documentclass[]{article}% 预定义一些参数 % ...

最新文章

  1. [dp] Jzoj P5804 简单的序列
  2. Visual Studio 2005 Beta2 简体中文版发布
  3. #1097 : 最小生成树一·Prim算法
  4. 网络协议基础：“工作中模模糊糊的概念，这次终于理顺了！”
  5. python相册管理系统_Django实现一个相片管理系统01
  6. java 0-9所有排列_java实现：键盘输入从0~9中任意5个数，排列组合出所有不重复的组合，打印出来...
  7. python list元素合并_Python-列表+-01-两个列表各元素合并
  8. a href 下载文件乱码
  9. vj p1025题解
  10. opencl初探-sobel检测
  11. cam350菜单怎么切换成中文_CAM350菜单中文详解
  12. 多年 iOS 开发经验总结
  13. 【H5调用iOS原生高德定位】
  14. 联想服务器自动关机_联想电脑设置自动关机
  15. 误差平方和用python_用Python学分析 - 单因素方差分析
  16. C语言之-1与0xffffffff
  17. 一个大二计算机学生的学期总结(2022末年)
  18. ElasticSearch 从5.6.3升级到7.9.3遇到问题总结
  19. 2022年5月26日：用C#生成.NET应用程序--创建新的.NET项目并使用依赖项（部分没看懂。）
  20. python人脸识别解锁电脑_Python 实现在 App 端的人脸识别！手机解锁人脸识别！

热门文章

  1. phpcmsv9 更换域名出现页面无法访问后怎么办
  2. 18. CSS 内边距
  3. 15. 从远程库克隆
  4. python 并发编程 socket 服务端 客户端 阻塞io行为
  5. Linux学习之安装jdk
  6. Python爬虫开发【第1篇】【Requests】
  7. MySQL · 引擎特性 · 基于InnoDB的物理复制实现(转载)
  8. day 34 进程线程排序 抢票 初级生产者消费者
  9. org.springframework.stereotype 注解
  10. uva11992-Fast Matrix Operations（区间增值、改值）