webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下。mkdir react-redux && cd react-redux
npm init -y
2.安装webpacknpm i webpack -D
npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI。npm install -D webpack webpack-cli
3.新建一下项目结构react-redux
|- package.json
+ |- /dist
+ |- index.html
|- /src
|- index.js
index.html
Title
index.jsdocument.querySelector('#root').innerHTML = 'webpack使用';
非全局安装下的打包。node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development
打开dist目录下的html显示 webpack使用
配置webpack
1.使用配置文件const path=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(dirname,'dist')
}
};
运行命令: node_modules\.bin\webpack --mode production可以以进行打包 2.NPM 脚本(NPM Scripts) 在在 package.json 添加一个 npm 脚本(npm script):"build": "webpack --mode production" 运行npm run build即可打包
使用webpack构建本地服务器
webpack-dev-server 提供了一个简单的 web 服务器,并且能够实时重新加载。
1.安装npm i -D webpack-dev-server修改配置文件webpack.config.jsconst path=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(dirname,'dist')
},
//以下是新增的配置
devServer:{
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port:3000,
open:true,//自动打开浏览器
}
};
运行 webpack-dev-server --progress ,浏览器打开localhost:3000,修改代码会实时显示修改的结果. 添加scripts脚本,运行 npm start 自动打开 http://localhost:8080/"start": "webpack-dev-server --open --mode development"
启动webpack-dev-server后,在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件
2.热更新
配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hotplugins:[
//热更新,不是刷新
new webpack.HotModuleReplacementPlugin()
],
在主要js文件里添加以下代码if (module.hot){
//实现热更新
module.hot.accept();
}
在webpack.config.js中开启热更新devServer:{
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port:3000,
open:true,//自动打开浏览器
hot:true //开启热更新
},
热更新允许在运行时更新各种模块,而无需进行完全刷新.
配置Html模板
1.安装html-webpack-plugin插件npm i html-webpack-plugin -D
2.在webpack.config.js里引用插件const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
//添加hash可以防止文件缓存,每次都会生成4位hash串
filename:'bundle.[hash:4].js',
path:path.resolve('dist')
},
//以下是新增的配置
devServer:{
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port:3000,
open:true,//自动打开浏览器
hot:true //开启热更新
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
hash:true, //会在打包好的bundle.js后面加上hash串
})
]
};
运行npm run build进行打包,这时候每次npm run build的时候都会在dist目录下创建很多打好的包.应该每次打包之前都将dist目录下的文件清空,再把打包好的文件放进去,这里使用clean-webpack-plugin插件.通过npm i clean-webpack-plugin -D 命令安装.然后在webpack.config.js中引用插件.const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
//添加hash可以防止文件缓存,每次都会生成4位hash串
filename:'bundle.[hash:4].js',
path:path.resolve('dist')
},
//以下是新增的配置
devServer:{
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port:3000,
open:true,//自动打开浏览器
hot:true //开启热更新
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
hash:true, //会在打包好的bundle.js后面加上hash串
}),
//打包前先清空
new CleanWebpackPlugin('dist')
]
};
之后打包便不会产生多余的文件.
编译es6和jsx
1.安装babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel加载器 babel-preset-env : 根据配置的 env 只编译那些还不支持的特性。 babel-preset-react: jsx 转换成js
2.添加.babelrc配置文件{
"presets": ["env", "stage-0","react"] //从左向右解析
}
3.修改webpack.config.jsconst path=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(dirname,'dist')
},
//以下是新增的配置
devServer:{
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module:{
rules:[
{
test:/\.js$/,
exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
use:{
loader:'babel-loader'
}
}
]
}
};
开发环境与生产环境分离
1.安装 webpack-mergenpm install --save-dev webpack-merge
2.新建一个名为webpack.common.js文件作为公共配置,写入以下内容:const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
entry:['babel-polyfill','./src/index.js'],
output:{
//添加hash可以防止文件缓存,每次都会生成4位hash串
filename:'bundle.[hash:4].js',
path:path.resolve(dirname,'dist')
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
hash:true, //会在打包好的bundle.js后面加上hash串
}),
//打包前先清空
new CleanWebpackPlugin('dist'),
new webpack.HotModuleReplacementPlugin() //查看要修补(patch)的依赖
],
module:{
rules:[
{
test:/\.js$/,
exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
use:{
loader:'babel-loader'
}
}
]
}
};
3.新建一个名为webpack.dev.js文件作为开发环境配置const merge=require('webpack-merge');
const path=require('path');
let webpack=require('webpack');
const common=require('./webpack.common.js');
module.exports=merge(common,{
devtool:'inline-soure-map',
mode:'development',
devServer:{
historyApiFallback: true, //在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
contentBase:path.resolve(dirname, '../dist'),//本地服务器所加载的页面所在的目录
inline: true,//实时刷新
open:true,
compress: true,
port:3000,
hot:true //开启热更新
},
plugins:[
//热更新,不是刷新
new webpack.HotModuleReplacementPlugin(),
],
});
4.新建一个名为webpack.prod.js的文件作为生产环境配置const merge = require('webpack-merge');
const path=require('path');
let webpack=require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode:'production',
plugins: [
new UglifyJSPlugin()
]
});
配置react
1.安装react、react-dom npm i react react-dom -S
2.新建App.js,添加以下内容.import React from 'react';
class App extends React.Component{
render(){
return (
佳佳加油
);
}
}
export default App;
3.在index.js添加以下内容.import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
4.安装 react-hot-loadernpm i -D react-hot-loader
5.修改配置文件 在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch,一定要写在entry 的最前面,如果有 babel-polyfill 就写在babel-polyfill 的后面
6.在 .babelrc 里添加 plugin, "plugins": ["react-hot-loader/babel"]
处理SASS
1.安装 style-loader css-loader url-loadernpm install style-loader css-loader url-loader --save-dev
2.安装 sass-loader node-sassnpm install sass-loader node-sass --save-dev
3.安装 mini-css-extract-plugin ,提取单独打包css文件npm install --save-dev mini-css-extract-plugin
4.配置webpack配置文件
webpack.common.js{
test:/\.(png|jpg|gif)$/,
use:[
"url-loader"
]
},
webpack.dev.js{
test:/\.scss$/,
use:[
"style-loader",
"css-loader",
"sass-loader"
]
}
webpack.prod.jsconst merge = require('webpack-merge');
const path=require('path');
let webpack=require('webpack');
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode:'production',
module:{
rules:[
{
test:/\.scss$/,
use:[
// fallback to style-loader in development
process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new UglifyJSPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
});
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
webpack搭建php服务器,webpack搭建react开发环境步骤详解相关推荐
- oracle oaf结构,配置Oracle ebs的oaf开发环境步骤详解
我们在配置Oracle ebs的oaf开发环境的过程中首先我们需要下载jdev 9.03.5带OracleApplications Extension的扩展包,之后再解压至某目录里,这是配置Oracl ...
- Linux 下搭建jsp服务器(配置jsp开发环境)
Linux 做为服务器的高效一直时为人所熟知的了,在linux 上搭建各种各样的服务器和开发环境也时学计算机的人常做的.以下时最近在linux配置jsp服务器的全过程,包含一些基本步骤和排错过程: 1 ...
- ubuntu java 开发环境_详解ubuntu搭建Java开发环境
没有用Java写过程序,做为一个Java新手,在写第一个Hello,world程序之前,先在Ubuntu中搭建Java开发环境. 本文结构: 一.JDK安装 二.MyEclipse安装 三.Hello ...
- Java零基础必看学习教程,Java开发环境配置详解
很多Java新手小白在学习Java编程的时候,碰到的第一难题就是不知道如何安装和配置java开发环境. 今天整理了史上最详细的安装及Java开发环境配置教程,通过图文并茂的方式详细讲解每一步骤,手把手 ...
- Kinect开发笔记之三Kinect开发环境配置详解
0.前言: 首先说一下我的开发环境,Visual Studio是2013的,系统是win8的64位版本,SDK是Kinect for windows SDK 1.8版本. ...
- spring.profiles.active 多种开发环境配置详解
在项目开发中,会有这样的需求,存在多种开发环境的配置,例如开发环境,预发环境,线上环境. 我们可以使用Spring的profiles机制来解决这种问题. Spring的profiles有两个变量我们可 ...
- Python开发环境安装详解
目录 前言 安装包下载(两种方式) 一.官网下载 二.其他方式 Python安装 检查python是否安装成功 总结 前言 本篇文章手把手教学Python开发环境的安装配置过程,即使没有任何开发经验, ...
- linux环境下创建postgis数据库,linux下搭建postgresql、postgis、pg_pathman环境步骤详解...
操作系统:centOS6.6 安装postgreSQL9.6.2 安装命令: ./postgresql-9.6.3-2-linux-x64.run 之后按照图形界面操作安装,语言选择zh_CN UTF ...
- 怎么配置服务器php环境,配置PHP服务器环境步骤详解
本节内容: 搭建与配置php服务器环境. 1,下载软件 PHP的建议下载zip包,原因installer的我安装下来,发现根目录下少很多文件,虽说很智能,自动配置apache等,但是也有很多限制,不利 ...
最新文章
- android gradle 给所有的buildFlavor 的versionName 增加一个后缀
- 基于微软ASP.NET AJAX框架开发幻灯片播放网页
- 第三次学JAVA再学不好就吃翔(part17)--数组
- “约见”面试官系列之常见面试题第四十四篇之webpack打包原理解析?(建议收藏)
- php 文件 后缀,php如何修改文件后缀名
- 计算机体系结构_计算机体系结构知识笔记
- 正则表达式 判断 连号如“123456”、同号如“888888”、连同号如“112233”“222333”...
- python实现一个数如果恰好等于它的因子之和,这个数就称为“完数” 。例如, 6的因子为 1、2、3,而 6=1+2+3,因此 6 是完数。编程找出1000之内的所有完数
- Linux 命令(67)—— time 命令
- Mac下.DS_Store删除、禁止生成以及恢复生成方式
- Ubuntu Server Nginx 下配置 mono 下运行 asp.net mvc
- vc 模拟按键 模拟windows消息方式_PC微信电脑端WeChat点击脚本(按键精灵)2020小工具...
- 证券行业信息技术规范
- 邻接矩阵实现无向图的创建并根据louvain算法实现分区
- SSH 只能用于远程 Linux 主机?那说明你见识太小了!
- 概率学A和C公式,Java计算阶乘,不重复三位数
- [转载]JS的IE和Firefox兼容性汇编(原作:hotman_x)
- python处理grd格式文件_python json pickle 模块
- 微信PC扫码支付(五)-订单查询,关闭订单,下载对账单
- gitlab编译安装史----虽败犹荣
热门文章
- 彻底搞懂---三握四挥
- Linux之xargs
- Spring boot修改员工
- html下拉列表框设置两个,怎么使用HTML option标签添加两个value
- 弱引用什么时候被回收_Java引用类型有哪些
- fvdm 跟驰模型 matlab仿真_【新书推荐】【2009.01】控制系统MATLAB计算及仿真(第3版)(黄忠霖)...
- java enum枚举的使用详情(实例与原理分析)
- hibernate继承关系映射关系方法(二)--每个子类一张表
- JavaSE教程-03深入探究原码,反码,补码-扩展
- java如何创造一个整数的类_【技术干货】Java 面试宝典:Java 基础部分(1)