首页
所有分类
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 相关文章推荐
JQuery 1.6发布 性能提升，同时包含大量破坏性变更
May 10 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
浅谈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) 中波(3) KDKA(1) 保养(1) 调频(4) 长波(3) 短波(8) 电台频率(32) 收音机(62) Harman Kardon(1)
You might like
php 字符串函数收集
2010/03/29 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python求解平方根的方法
2015/03/11 Python
Python多项式回归的实现方法
2019/03/11 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python实现交并比IOU教程
2020/04/16 Python
如何在python中判断变量的类型
2020/07/29 Python
孕妇装中的著名品牌：Isabella Oliver（伊莎贝拉·奥利弗）
2016/10/31 全球购物
小天鹅官方商城：LittleSwan
2017/06/16 全球购物
牵手50台湾：专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
日本亚马逊官方网站：Amazon.co.jp
2020/04/14 全球购物
委托证明的格式
2014/01/10 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
社区戒毒工作方案
2014/06/04 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
贫困证明怎么写
2015/06/16 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL