使用webpack搭建反应开发环境的方法

　　

<强> 1。初始化项目

　　 　　 　　mkdir react-redux,,cd react-redux 　　npm init - y 　　 　　

<强> 2。安装webpack

　　 　　 　　npm我webpack - d 　　 　　

npm我- d是npm安装——save-dev的简写,是指安装模块并保存到包中。json的devDependencies中,主要在开发环境中的依赖包。如果使用webpack 4 +版本,还需要安装CLI。

　　 　　 　　npm安装- d webpack webpack-cli 　　 　　

<强> 3。新建一下项目结构

　　 　　 　　react-redux 　　| - package.json 　　+ | -/dist 　　+ | - index . html 　　| -/src 　　| - index.js 　　之前 　　 　　

index . html 　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> Title 　　& lt;/head> 　　& lt; body> 　　& lt; div id="根"祝辞& lt;/div> 　　& lt;脚本src=" https://www.yisu.com/zixun/bundle.js "祝辞& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　之前 　　 　　

index.js 　　 　　 　　document.querySelector(“#根”)。innerHTML=' webpack使用的; 　　之前 　　 　　

非全局安装下的打包。

　　 　　 　　node_modules \。本\ webpack src \指数。js -输出dist \包。js -模式发展 　　 　　

打开dist目录下的html显示webpack使用

　　

　　

1。使用配置文件

　　 　　 　　const path=要求(“路径”); 　　module.exports={ 　　条目:“。/src/index.js ', 　　输出:{ 　　文件名:“bundle.js”, 　　路径:path.resolve (__dirname,“距离”) 　　} 　　}; 　　之前 　　 　　

运行命令:<代码> node_modules \。本\ webpack——生产模式> “构建”:“webpack——生产模式”运行<代码> npm运行构建即可打包

　　

　　

webpack-dev-server提供了一个简单的web服务器,并且能够实时重新加载。

　　

1。安装<代码> npm我- d webpack-dev-server 修改配置文件webpack.config.js

　　 　　 　　const path=要求(“路径”); 　　module.exports={ 　　条目:“。/src/index.js ', 　　输出:{ 　　文件名:“bundle.js”, 　　路径:path.resolve (__dirname,“距离”) 　　},//以下是新增的配置 　　devServer: { 　　contentBase:“。/dist ",//本地服务器所加载的页面所在的目录 　　historyApiFallback:真的,//不跳转 　　内联:真的,//实时刷新 　　端口:3000 　　开放:真的,//自动打开浏览器 　　} 　　}; 　　 　　

运行webpack-dev-server——进步,浏览器打开localhost: 3000年,修改代码会实时显示修改的结果。添加脚本脚本,运行npm开始自动打开http://localhost: 8080/

　　 　　 　　“开始”:“webpack-dev-server——开放模式发展” 　　 　　

启动webpack-dev-server后,在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中,因此使用webpack-dev-server进行开发的时候都看不到编译后的文件

　　

2。热更新

　　

配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hot

　　 　　 　　插件:[//热更新,不是刷新 　　新的webpack.HotModuleReplacementPlugin () 　　]， 　　之前 　　 　　

在主要js文件里添加以下代码

　　 　　 　　如果(module.hot) {//实现热更新 　　module.hot.accept (); 　　} 　　之前 　　 　　

在webpack.config.js中开启热更新

　　 　　 　　devServer: { 　　contentBase:“。/dist ",//本地服务器所加载的页面所在的目录 　　historyApiFallback:真的,//不跳转 　　内联:真的,//实时刷新 　　端口:3000 　　开放:真的,//自动打开浏览器 　　热:真//开启热更新 　　}, 　　之前 　　 　　

热更新允许在运行时更新各种模块,而无需进行完全刷新。

　　

　　

1。安装html-webpack-plugin插件

　　 　　 　　npm我html-webpack-plugin - d 　　 　　

2。在webpack.config.js里引用插件

　　 　　 　　const path=要求(“路径”); 　　让webpack=要求(“webpack”); 　　让HtmlWebpackPlugin=要求(“html-webpack-plugin”); 　　module.exports={ 　　条目:“。/src/index.js ', 　　输出:{//添加哈希可以防止文件缓存,每次都会生成4位哈希串 　　文件名:“包。(散列:4). js”, 　　路径:path.resolve(“区域”) 　　},//以下是新增的配置 　　devServer: { 　　contentBase:“。/dist ",//本地服务器所加载的页面所在的目录 　　historyApiFallback:真的,//不跳转 　　内联:真的,//实时刷新 　　端口:3000 　　开放:真的,//自动打开浏览器 　　热:真//开启热更新 　　}, 　　插件:[ 　　新HtmlWebpackPlugin ({ 　　模板:“。/src/index . html”, 　　散列:真的,//会在打包好的bundle.js后面加上散列串 　　}) 　　] 　　}; 　　

使用webpack搭建反应开发环境的方法