未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

1.初始化项目

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

2.安装webpack

npm 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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>

index.js

document.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.js

const 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.hot

plugins:[
//热更新,不是刷新
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.js

const 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-merge

npm 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 (<div>佳佳加油</div>);
}
}
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(
<AppContainer>
<App/>
</AppContainer>,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
4.安装 react-hot-loader

npm 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-loader

npm install style-loader css-loader url-loader --save-dev
2.安装 sass-loader node-sass

npm 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.js

const 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"
})
]
});

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:手动用webpack搭建第一个ReactApp的示例详解Webpack+Babel+React开发环境的搭建的方法步骤详解基于webpack搭建react运行环境

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器React浏览器JSPHTMLHTML5UTSAS
tags: webpack,js,path,require,loader,true,react,gt,lt,dist,npm,module,babel,html,hash
分页:12
转载请注明
本文标题:使用webpack搭建react开发环境的方法
本站链接:http://www.codesec.net/view/576490.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(11)