介绍 <李> ,, const path =,要求(& # 39;path & # 39;);
const 才能;HTMlPlugin =,要求(& # 39;html-webpack-plugin& # 39;);
,,//才能,判断是否是开发环境
const 才能;isDev =, process.env.NODE_ENV ===, & # 39;发展# 39;
,,
,,
const 才能;config =, {
,,,条目:,{
,,,,,的应用:,path.join (__dirname & # 39; . ./客户/app.js& # 39;)
,,,},
输出:,,,,{
,,,,,文件名:,& # 39;[名字]。(哈希). js,,
,,,,,路径:,path.join (__dirname & # 39; . ./dist # 39;),
,,,,,publicPath:, & # 39;/公共# 39;
,,,},
,,,模块:,{
,,,,,规则:,(
,,,,,,,{
,,,,,,,,,测试:,/.jsx/美元,
,,,,,,,,,装载机:,& # 39;babel-loader& # 39;
,,,,,,,},
,,,,,,,{
,,,,,,,,,测试:,/js/美元,
,,,,,,,,,装载机:,& # 39;babel-loader& # 39;
,,,,,,,,,排除:,
,,,,,,,,,,,path.join (__dirname & # 39; . ./node_modules& # 39;)
,,,,,,,,,)
,,,,,,,}
,,,,,)
,,,},
,,,插件:[
,,,,,new HTMlPlugin ({
,,,,,,,模板:path.join (__dirname & # 39; . ./客户/template.html& # 39;)
,,,,,})
,,,)
,,}
,,//新才能增
如果才能(isDev) {
,,,//,开发环境
,,,config.devServer =, {
,,,,,主持人:,& # 39;0.0.0.0 # 39;//可以使用ip访问
,,,,,端口:& # 39;8888 & # 39;
,,,,,contentBase:, path.join (__dirname & # 39; . ./dist # 39;),//打包后的文件
,,,,,覆盖:{
,,,,,,,错误:true //直接在网页上显示错误
,,,,,},
,,,,,publicPath: & # 39;/公共# 39;
,,,,,historyApiFallback: {
,,,,,,,指数:& # 39;/公共/index . html # 39;
,,,,,}
,,
,,,}
,,}
时间=module.exports 才能;配置; npm install cross-env - d ,,“dev: client":,“cross-env NODE_ENV=development webpack-dev-server ——config 构建/webpack.config.client.js" npm install react-hot-loader - d , const webpack =,需要(& # 39;webpack& # 39;)
,如果(isDev) {
,,config.entry ={
,,,,应用:(
,,,,,,“react-hot-loader/patch",
,,,,,,path.join (__dirname & # 39; . ./客户/app.js& # 39;)
,,,,)
,,}
,,…省略
,,config.plugins.push (new webpack.HotModuleReplacementPlugin ())
以前,} ,…省略
{,import AppContainer },得到& # 39;react-hot-loader& # 39;;
,const root =, . getelementbyid(& # 39;根# 39;)
,const render =, Component =祝辞{
,,aaa.hydrate (
,,,,& lt; AppContainer>
,,,,,,& lt; Component /比;
,,,,& lt;/AppContainer>
,,,的根
,,,)
,}
,呈现(应用)
,如果(module.hot) {
,,module.hot.accept (& # 39;。/App.jsx& # 39;,()=祝辞{
null
null
null
null
这篇文章将为大家详细讲解有关使用webpack怎么实现自动打包和热更新,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
webpack常用配置
webpack dev服务器
功能:自动打包文件
<李>配置开发服务器:在webpack.config.client。js中配置
在包中。json中增加一条命令来进行自动打包
cross-env是为了兼容mac windows liunx的环境变量,需要安装。
<>强热模块replacemennt
功能:自动刷新页面
配置热模块:
安装react-hot-loader
在webpack.config.client。js中配置
在客户机/应用程序。js中配置
