使用webpack4从零开始构建反应开发环境的案例

　　介绍

这篇文章将为大家详细讲解有关使用webpack4从零开始构建反应开发环境的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>项目文件准备:

执行npm init,然后创建如下图所示的文件。

使用webpack4从零开始构建反应开发环境的案例

在索引。html里面添加

& lt; ! DOCTYPE  html> 　　& lt; html> 　　,& lt; head> 　　& lt;才能title>从而Minimal  React  Webpack  Babel  Setup 　　,& lt;/head> 　　,& lt; body> 　　& lt;才能div  id=癮pp"祝辞& lt;/div> 　　& lt;才能script  src=https://www.yisu.com/zixun/薄?bundle.js "> 　　 　　

在webpack.config。js里面添加

module.exports =, { 　　,条目:& # 39;。/src/index.js& # 39; 　　,输出:{ 　　,,路径:__dirname  +, & # 39;/dist # 39; 　　publicPath才能:& # 39;/& # 39; 　　,,文件名:& # 39;bundle.js& # 39; 　　}, 　　,devServer: { 　　contentBase才能:& # 39;。/dist # 39; 　　,} 　　};

在包中。json里面添加

,“scripts":, { 　　“时才能:,“webpack-dev-server ——config 。/webpack.config.js ——mode  development" 　　},

这样,当执行npm开始的时候,就会使用webpack-dev-server把index.js相关文件打包,生成bundle.js,这时候浏览器会打开一个窗口,执行index . html (contentBase里面定义了),又因为index . html里面引入了bundle.js,就可以把压缩后的js文件执行起来。当然引入包。js这一步可以由我们强大的html-webpack-plugin完成。

<>强安装依赖

npm  install ——save-dev  webpack  webpack-dev-server  webpack-cli 　　npm  install ——save-dev  @babel/core  @babel/preset-env 　　npm  install ——save-dev  babel-loader 　　npm  install ——save-dev  @babel/preset-react

<强>配置巴别塔

在根目录下新建。babelrc文件,然后添加

{ 　　,“presets":, 　　“@babel/preset-env"才能, 　　“才能@babel/preset-react" 　　,) 　　}

在webpack.config。js里面添加babel-loader配置

module.exports =, { 　　,…… 　　,模块:{ 　　规则:,才能 　　,,{ 　　,,,测试:,/\。(js | jsx)/美元, 　　,,,排除:,node_modules/, 　　,,,使用:,(& # 39;babel-loader& # 39;】 　　,,} 　　,,) 　　}, 　　,解决:{ 　　扩展才能:[& # 39;* & # 39;,,& # 39;. js # 39;,, & # 39; .jsx& # 39;】 　　,} 　　,…… 　　};

<>强引入反应

npm  install ,,节省react  react-dom

修改指数。js:这个ReactDOM.render就是把元素渲染到index . html里面id为& # 39;应用# 39;的元素厦门。在实际开发中,我们会把app.js渲染到这里,然后在应用。js里面写回家的,react-router构成的页面的起点。

import  React 得到& # 39;反应# 39;; 　　import  ReactDOM 得到& # 39;react-dom& # 39;; 　　 　　const  title =, & # 39; My  Minimal  React  Webpack  Babel 设置# 39;; 　　 　　ReactDOM.render ( 　　,& lt; div>{标题}& lt;/div> 　　,. getelementbyid(& # 39;应用# 39;) 　　);

配置反应热加载

npm  install ——save-dev  react-hot-loader

webpack.config。js

const  webpack =,要求(& # 39;webpack& # 39;); 　　 　　module.exports =, { 　　,…… 　　,插件:[ 　　new 才能;webpack.HotModuleReplacementPlugin () 　　,), 　　,devServer: { 　　contentBase才能:& # 39;。/dist # 39; 　　热点:才能正确 　　,} 　　,…… 　　};

修改指数。js

import  React 得到& # 39;反应# 39;; 　　import  ReactDOM 得到& # 39;react-dom& # 39;; 　　 　　const  title =, & # 39; My  Minimal  React  Webpack  Babel 设置# 39;; 　　 　　ReactDOM.render ( 　　,& lt; div>{标题}& lt;/div> 　　,. getelementbyid(& # 39;应用# 39;) 　　）； 　　 　　+,module.hot.accept ();

这个时候执行npm开始,就可以在浏览器访问http://localhost: 8080看到索引。html里面的内容啦啦。

关于“使用webpack4从零开始构建反应开发环境的案例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

使用webpack4从零开始构建反应开发环境的案例