首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 15, 2018

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搭建react开发环境的方法

- Author -

啊哈HL

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
Feb 19 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
VSCode搭建React Native环境
May 07 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
浅谈Node.js 沙箱环境
May 15 #Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 #Javascript
WebPack配置vue多页面的技巧
May 15 #Javascript
修改npm全局安装模式的路径方法
May 15 #Javascript
修改node.js默认的npm安装目录实例
May 15 #Javascript
Vue中的scoped实现原理及穿透方法
May 15 #Javascript
vue-cli项目中使用Mockjs详解
May 14 #Javascript
单向链表(1) Scheduled(1) RTMP(1) TypeScript(2) keeplive_timeout(1) 区块链(2) 模拟登录(1) NumPy(2) 双向链表(6) text-shadow(1)
You might like
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
理解AngularJs篇：30分钟快速掌握AngularJs
2016/12/23 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Python语法快速入门指南
2015/10/12 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python实现俄罗斯方块游戏
2020/03/25 Python
详解如何设置Python环境变量？
2019/05/13 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
MyHeritage美国：家族史研究和DNA测试的领先服务
2019/05/27 全球购物
android面试问题与答案
2016/12/27 面试题
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
好段摘抄大全（48句）
2019/08/08 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Vue监视数据的原理详解
2022/02/24 Vue.js
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android
app场景下uniapp的扫码记录
2022/07/23 Java/Android