资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用webpack搭建react开发环境

使用webpack搭建react开发环境

wanglu1209 / 2555人阅读

摘要：安装和使用初始化项目安装是的简写，是指安装模块并保存到的中，主要在开发环境中的依赖包如果使用版本，还需要安装。新建一下项目结构使用非全局安装下的打包。

安装和使用webpack

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




    
    Title

index.js

document.querySelector("#root").innerHTML = "webpack使用";

非全局安装下的打包。

node_modules.binwebpack srcindex.js --output distundle.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.binwebpack --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 (
佳佳加油
);
    }
}
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-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"
         })
     ]
 });
GPU云服务器 云服务器 php开发环境使用 开发环境搭建 搭建开发环境 安卓开发环境搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113273.html

相关文章

  • react实时热更新开发环境搭建

    摘要：搭建一个实时热更新开发环境，当代码变更时，可以不用重新启动打包文件，这样会很大地提高我们的开发效率。完成开发环境搭建。 搭建一个react实时热更新开发环境，当代码变更时，可以不用重新启动webpack打包文件，这样会很大地提高我们的开发效率。 使用工具 vscode编辑器，可以实时git推送更新自带git命令行，随意下载各种语言框架代码格式化高亮插件 chrome ^58浏览器性能...

    princekin 评论0 收藏0

  • react实时热更新开发环境搭建

    摘要：搭建一个实时热更新开发环境，当代码变更时，可以不用重新启动打包文件，这样会很大地提高我们的开发效率。完成开发环境搭建。 搭建一个react实时热更新开发环境，当代码变更时，可以不用重新启动webpack打包文件，这样会很大地提高我们的开发效率。 使用工具 vscode编辑器，可以实时git推送更新自带git命令行，随意下载各种语言框架代码格式化高亮插件 chrome ^58浏览器性能...

    Vultr 评论0 收藏0

  • React系列---Webpack环境搭建（二）不同环境不同配置

    摘要：系列环境搭建一手动搭建系列环境搭建二不同环境不同配置系列环境搭建三打包性能优化实际项目中，往往不同环境有不同的构建需求。 React系列---Webpack环境搭建（一）手动搭建React系列---Webpack环境搭建（二）不同环境不同配置React系列---Webpack环境搭建（三）打包性能优化 实际项目中，往往不同环境有不同的构建需求。比如开发、测试和生产环境对应的后端接口地...

    coordinate35 评论0 收藏0

  • 手把手教你从零搭建react局部热加载环境

    摘要：有没有办法实现就局部刷新呢当然是有第十步执行为了实现局部热加载，我们需要添加插件。 前言 用了3个多月的vue自认为已经是一名合格的vue框架api搬运工，对于vue的api使用到达了一定瓶颈，无奈水平有限，每每深入底层观赏源码时候都迷失了自己。 遂决定再找个框架学习学习看看能否突破思维局限，加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭...

    quietin 评论0 收藏0

  • react+webpack+webstorm开发环境搭建

    摘要：先是基础知识，首先是补了的基础，使用了的入门教程。另外关于，慕课的视频教程讲的也比较清晰，适合入门统统过了一遍之后，开始建立脚手架，正式上马编写。废话不多说了，下面一步一步开始了。安装完成之后，记得设置路径构建项目使用新建一个空白项目。 前言 春节期间，更新了一下自己关于前端的知识体系，要知道对于前端技术，我还是停留在JSP，JQUERY的时代，现在项目里面使用REACT作为前台，所以...

    Snailclimb 评论0 收藏0

发表评论

登陆后可评论

0条评论

wanglu1209

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<