无法使用 Webpack 2.2.0 和 webpack-dev-server 2.2.1 进行 HMR（热模块替换）css/scss
Unable to HMR (Hot Module Replacement) css/scss with Webpack 2.2.0 and webpack-dev-server 2.2.1
版本
"extract-text-webpack-plugin": "^2.0.0-rc.2",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.1"
问题
"extract-text-webpack-plugin": "^1.0.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
不再能够 HMR css/scss 自升级到版本 2 后，更改样式会触发更改（请参阅下面的输出示例）但我必须手动刷新页面才能看到页面不会自动进行的更改刷新，如果我在更改 scss 文件后对 js 文件进行更改，则更改会反映为 js 更改触发 HMR，其中还包括样式更改，但仅更改样式而不更改 js 需要手动页面刷新.
如果我配置有误或者我需要做什么才能使 css/scss HMR 正常工作，有什么想法吗？
我也在这里发布了这个问题：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384但不确定它是 webpack-dev-server 问题还是 extract-text-webpack-plugin 问题或者仅仅是我所做的事情。
命令运行宁:
npm 运行 开发
"scripts": {
"dev": "webpack-dev-server --hot --inline"
}
升级前配置：
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');
let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true });
const config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
externals: {
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.scss$/,
loader: extractCSS.extract('style', 'css?modules=true!sass?sourceMap=true')
}
]
},
plugins: [
generateHtml,
extractCSS
]
};
module.exports = config;
升级后配置：
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');
let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin({ filename: 'styles/[name].css', allChunks: true });
const config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
externals: {
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
module : {
loaders : [
{
test : /\.(js|jsx)?/,
include : APP_DIR,
loader : 'babel-loader'
},
{
test: /\.scss$/,
loader: extractCSS.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader?modules', 'sass-loader']
})
}
]
},
plugins: [
generateHtml,
extractCSS
]
};
module.exports = config;
输出示例初始页面加载。
> webpack-dev-server --hot --inline
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 0e873f689fcea2b7cee6
Version: webpack 2.2.0
Time: 3350ms
Asset Size Chunks Chunk Names
bundle.js 1.1 MB 0 [emitted] [big] main
styles/main.css 634 bytes 0 [emitted] main
index.html 223 bytes [emitted]
chunk {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
[19] ./~/react/react.js 56 bytes {0} [built]
[45] ./~/redux/es/index.js 1.08 kB {0} [built]
[106] ./~/react-redux/es/index.js 194 bytes {0} [built]
[129] (webpack)/hot/emitter.js 77 bytes {0} [built]
[130] ./app/index.js 938 bytes {0} [built]
[131] (webpack)-dev-server/client?http://localhost:8080 4.66 kB {0} [built]
[132] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
[139] ./app/containers/App.js 4.25 kB {0} [built]
[178] ./~/react-dom/index.js 59 bytes {0} [built]
[269] ./~/redux-thunk/lib/index.js 529 bytes {0} [built]
[300] ./~/strip-ansi/index.js 161 bytes {0} [built]
[305] ./~/url/url.js 23.3 kB {0} [built]
[307] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[309] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
[310] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app/index.js 52 bytes {0} [built]
+ 296 hidden modules
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 540 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.77 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/user/users.scss 267 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.81 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/containers/app.scss 307 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 2.21 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 702 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.87 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/common/common.scss 361 bytes {0} [built]
webpack: bundle is now VALID.
scss更改后的输出示例。
webpack: bundle is now INVALID.
Hash: f16b1beda9083db91735
Version: webpack 2.2.0
Time: 251ms
Asset Size Chunks Chunk Names
bundle.js 1.1 MB 0 [emitted] [big] main
0e873f689fcea2b7cee6.hot-update.json 35 bytes [emitted]
styles/main.css 626 bytes 0 [emitted] main
chunk {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
[143] ./app/components/navbar/navbar.scss 181 bytes {0} [built]
+ 310 hidden modules
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [entry]
+ 4 hidden modules
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 2.2 kB [entry] [rendered]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 694 bytes {0} [built]
+ 1 hidden modules
webpack: bundle is now VALID.
您可以看到 main.css 的大小发生了变化，但是在我按下 f5 之前页面从未刷新
如 extract-text-webpack-plugin 的 github 主页所述：
注意事项："No Hot Module Replacement"
你不应该在开发时使用这个插件，它对于创建生产构建仍然有用。
您可以创建两个 webpack 配置文件，一个用于开发，一个用于生产，这可能对两种情况都有帮助。
为了在使用 extract-text-webpack-plugin 时更好地控制 CSS HMR，请使用 css-hot-loader
下面是我在规则集合中的使用代码示例
{
test: /\.css$/,
use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
}))
}
版本
"extract-text-webpack-plugin": "^2.0.0-rc.2",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.1"
问题
"extract-text-webpack-plugin": "^1.0.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
不再能够 HMR css/scss 自升级到版本 2 后，更改样式会触发更改（请参阅下面的输出示例）但我必须手动刷新页面才能看到页面不会自动进行的更改刷新，如果我在更改 scss 文件后对 js 文件进行更改，则更改会反映为 js 更改触发 HMR，其中还包括样式更改，但仅更改样式而不更改 js 需要手动页面刷新.
如果我配置有误或者我需要做什么才能使 css/scss HMR 正常工作，有什么想法吗？
我也在这里发布了这个问题：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384但不确定它是 webpack-dev-server 问题还是 extract-text-webpack-plugin 问题或者仅仅是我所做的事情。
命令运行宁:
npm 运行 开发
"scripts": {
"dev": "webpack-dev-server --hot --inline"
}
升级前配置：
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');
let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true });
const config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
externals: {
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.scss$/,
loader: extractCSS.extract('style', 'css?modules=true!sass?sourceMap=true')
}
]
},
plugins: [
generateHtml,
extractCSS
]
};
module.exports = config;
升级后配置：
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');
let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin({ filename: 'styles/[name].css', allChunks: true });
const config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
externals: {
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
module : {
loaders : [
{
test : /\.(js|jsx)?/,
include : APP_DIR,
loader : 'babel-loader'
},
{
test: /\.scss$/,
loader: extractCSS.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader?modules', 'sass-loader']
})
}
]
},
plugins: [
generateHtml,
extractCSS
]
};
module.exports = config;
输出示例初始页面加载。
> webpack-dev-server --hot --inline
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 0e873f689fcea2b7cee6
Version: webpack 2.2.0
Time: 3350ms
Asset Size Chunks Chunk Names
bundle.js 1.1 MB 0 [emitted] [big] main
styles/main.css 634 bytes 0 [emitted] main
index.html 223 bytes [emitted]
chunk {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
[19] ./~/react/react.js 56 bytes {0} [built]
[45] ./~/redux/es/index.js 1.08 kB {0} [built]
[106] ./~/react-redux/es/index.js 194 bytes {0} [built]
[129] (webpack)/hot/emitter.js 77 bytes {0} [built]
[130] ./app/index.js 938 bytes {0} [built]
[131] (webpack)-dev-server/client?http://localhost:8080 4.66 kB {0} [built]
[132] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
[139] ./app/containers/App.js 4.25 kB {0} [built]
[178] ./~/react-dom/index.js 59 bytes {0} [built]
[269] ./~/redux-thunk/lib/index.js 529 bytes {0} [built]
[300] ./~/strip-ansi/index.js 161 bytes {0} [built]
[305] ./~/url/url.js 23.3 kB {0} [built]
[307] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[309] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
[310] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app/index.js 52 bytes {0} [built]
+ 296 hidden modules
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 540 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.77 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/user/users.scss 267 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.81 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/containers/app.scss 307 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 2.21 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 702 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.87 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/common/common.scss 361 bytes {0} [built]
webpack: bundle is now VALID.
scss更改后的输出示例。
webpack: bundle is now INVALID.
Hash: f16b1beda9083db91735
Version: webpack 2.2.0
Time: 251ms
Asset Size Chunks Chunk Names
bundle.js 1.1 MB 0 [emitted] [big] main
0e873f689fcea2b7cee6.hot-update.json 35 bytes [emitted]
styles/main.css 626 bytes 0 [emitted] main
chunk {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
[143] ./app/components/navbar/navbar.scss 181 bytes {0} [built]
+ 310 hidden modules
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [entry]
+ 4 hidden modules
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 2.2 kB [entry] [rendered]
[1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 694 bytes {0} [built]
+ 1 hidden modules
webpack: bundle is now VALID.
您可以看到 main.css 的大小发生了变化，但是在我按下 f5 之前页面从未刷新
如 extract-text-webpack-plugin 的 github 主页所述： 注意事项："No Hot Module Replacement"
你不应该在开发时使用这个插件，它对于创建生产构建仍然有用。 您可以创建两个 webpack 配置文件，一个用于开发，一个用于生产，这可能对两种情况都有帮助。
为了在使用 extract-text-webpack-plugin 时更好地控制 CSS HMR，请使用 css-hot-loader
下面是我在规则集合中的使用代码示例
{
test: /\.css$/,
use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
}))
}