极客观点
项目管理
HarmonyOS
react-hot-loader 不生效，发现 module.hot.accept 回调没执行。
按照文档配置的：
https://github.com/gaearon/re...
目录结构
-
webpack-test
- node_modules
-
src
- index.js
- main.js
- style.pcss
- tpl.html
- .babelrc
- package.json
- webpack.config.js
webpack.config.js
// import webpack from 'webpack';
// import path from 'path';
//
// import ExtractTextPlugin from 'extract-text-webpack-plugin';
// import HtmlWebpackPlugin from 'html-webpack-plugin';
// import CleanWebpackPlugin from 'clean-webpack-plugin';
//
// import cssnext from 'postcss-cssnext';
// import precss from 'precss';
// import pxtorem from 'postcss-pxtorem';
// import autoprefixer from 'autoprefixer';
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const cssnext = require('postcss-cssnext');
const precss = require('precss');
const pxtorem = require('postcss-pxtorem');
const autoprefixer = require('autoprefixer');
const webpackConfig = {
entry: {
vendor: ['babel-polyfill', 'react-hot-loader/patch', 'react', 'react-dom'],
index: './src/index',
main: './src/main'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
use: [
// {
// loader: 'bundle-loader',
// options: {
// // lazy: true
// }
// },
'babel-loader'
]
},
{
test: /\.(css|pcss)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
minimize: true,
modules: true,
localIdentName: '[local]_[hash:5]'
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
cssnext(),
precss(),
pxtorem({
rootValue: 75,
propList: ['*']
}),
autoprefixer()
]
}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5120
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
template: './src/tpl.html'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
})
]
};
console.log(process.env.NODE_ENV)
if (process.env.NODE_ENV === 'development') {
// 开发环境
webpackConfig.devtool = 'inline-source-map';
webpackConfig.devServer = {
contentBase: path.resolve(__dirname, 'dist'),
hot: true
};
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin()
);
} else {
// 生产环境
}
// export default webpackConfig;
module.exports = webpackConfig;.babelrc
{
"presets": [
["env", {"modules": false}],
"stage-0",
"stage-1",
"stage-2",
"stage-3",
"react"
],
"plugins": [
"react-hot-loader/babel"
]
}main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './index';
import { AppContainer } from 'react-hot-loader';
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root')
)
};
render(App);
if (module.hot) {
console.log(module.hot);
module.hot.accept('./index', () => {
alert(123)
render(App)
});
}index.js
import css from './style.pcss';
import React from 'react';
class App extends React.Component {
render () {
return (
<h1>1</h1>
)
}
}
export default App;package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack -p --progress",
"start": "cross-env NODE_ENV=development webpack-dev-server --open"
},
"author": "",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"bundle-loader": "^0.5.5",
"clean-webpack-plugin": "^0.1.17",
"cross-env": "^5.1.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"lodash": "^4.17.4",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-pxtorem": "^4.0.1",
"precss": "^2.0.0",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^1.1.0",
"url-loader": "^0.6.2",
"webpack": "^3.8.1"
},
"dependencies": {
"react-hot-loader": "^3.1.3",
"webpack-dev-server": "^2.9.4"
}
}
你需要搭配
webpack-dev-server来使用，且需要设置hot选项。命令行形式：
也可以直接在
webpack中配置：