08、React系列之--使用webpack管理

React 前端之家
前端之家收集整理的这篇文章主要介绍了08、React系列之--使用webpack管理，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1、什么是webpack

webpack是一个打包工具，是一个模块加载工具，是一个构建工具，在 webpack 当中,所有的资源都被当作是模块,js,css,图片等等。因此,webpack 当中 js 可以引用 css,css 中可以嵌入图片 dataUrl。看下图说明了webpack的功能

2、webpack的特点

  • 1、插件丰富
  • 2、有非常多的加载器，比如加载css的是css-loader,一般都有对应的loader
  • 3、代码分割，提供按需加载的能力
  • 4、发布工具
    • @H_403_16@

    3、webpack的优势

    • 1、webpack是以commonJs的形式来书写脚本，也全面支持AMD/CMD，方便旧的项目进行牵移。
    • 2、能模块化的不仅是Js，各种资源都可以做为模块来处理。
    • 3、 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
    • 4、扩展性强，插件机制完善，特别是支持 React 热插拔（react-hot-loader）的功能让人眼前一亮
      • @H_403_16@

      4、安装和使用webpack

      1、安装

      • 1、 一般情况下使用npm安装
        • @H_403_16@ 
        npm install -g webpack
        • 2、使用webpack。
          • @H_403_16@

          常规项目我们还要把webpack依赖加入到package.json中

          npm init 
npm install webpack --save-dev
          • 3、想安装开发工具那么执行如下命令
            • @H_403_16@ 
            npm install webpack-dev-server --save-dev

            2、使用，以项目为例子演示

            1、初始化一个项目，新建webpackdemo文件夹，并且初始化

            mkdir webpackdemo && cd webpackdemo 
npm init

            2、安装webpack

            //全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

            3、在webpackdemo文件夹中新建app和public文件夹，当然名字可以自己任意指定

            mkdir app && mkdir public

            4、然后在public目录中新建index.html,app目录中新建helloworld.js和main.js

            • index.html
              • @H_403_16@ 
              <!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>webpack 入门</title>
</head>
<body>
    <div id="container"></div>
    <script src="bundle.js"></script>
</body>
</html>
              • helloworld.js
                • @H_403_16@ 
                module.exports = function insertContent(){
  var hello = document.createElement('div');
  hello.textContent = "Hello world";
  return hello;
}
                • main.js
                  • @H_403_16@ 
                  var insertContent = require('./helloworld.js');
document.getElementById('container').appendChild(insertContent()) ;

                  然后运行webpack app/main.js public/bundle.js(全局安装过webpack就可以这样运行)，就会在public下面生成bundle.js文件，则打包就成功了

                  从图可以看出，webpack同时编译了main.js和helloworld.js

                  注：//webpack非全局安装的情况打包

                  node_modules/.bin/webpack app/main.js public/bundle.js

                  打开index.html查看结果:

                  这样我们就通过webpack成功的打包了一个文件，但是以上步骤都是要手动进行，非常不方便，我们下面来看看webpack的配置吧

                  5、配置webpack

                  webpack强大之处就在于可以灵活配置，比如一些loader和plugin都可以通过命令行来执行，但是一个个执行太TM的麻烦了，所以我们可以把相关的操作写到一个配置文件中去，这下就感觉爽歪歪了吧

                  1、webpack.config.js初探

                  在上面的例子上继续写配置文件，在根目录下新建webpack.config.js并且配置如下:

                  module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

                  然后我们在命令行执行

                  webpack

                  注：上面的命令是全局安装webpack时这样执行，如果只在项目中安装webpack那么执行:node_modules/.bin/webpack

                  就会得到下面结果和上面手动打包是一样的:

                  到此我们就掌握了一个简单的配置，并且不用手动去打包了。

                  2、在package.json中配置script

                  我们再来稍微高级一点用法，连webpack命令都不使用，我们在package.json配置script脚本如下:

                  {
  "name": "webpacknotedemo","version": "1.0.0","description": "","main": "index.js","scripts": { "test": "echo \"Error: no test specified\" && exit 1","start":"webpack" //配置这里 把npm的start命令指向webpack命令 },"author": "JunJun","license": "ISC","dependencies": { "webpack": "^1.13.3" } }

                  然后我们在命令行中运行npm start 也会打包出bundle.js，效果和上面一样

                  3、使用webpack构建本地服务器

                  1、在上面我们打包以后，要按f5重新刷新界面才能显示结果，想要修改一个界面自动刷新，那么我们可以安装一个服务组件。

                  npm install webpack-dev-server --save-dev

                  2、安装完以后需要在webpack.config.js中去配置服务，否则不起作用(当然可以命令行执行其任务，我们肯定首选配置了)

                  devServer的配置如下：

                  devServe配置项 功能描述
                  contentBase 提供本地服务的目录，默认是根目录
                  inline 为true就会自动打包并且刷新浏览器，是一种启动模式
                  iFrame 另一种启动模式，该模式下修改代码会自动打包，但是不会自动刷新浏览器
                  port 服务监听的端口号
                  colors 设置为true则终端输出就为彩色的
                  historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html 
                  module.exports = {
  entry: __dirname +"/app/main.js",//唯一的入口文件
  output:{
    path: __dirname +"/public",//打包后文件存放的目录
    filename:'bundle.js' //打包后输入的文件名
  },//以下是新增的配置
  devServer:{
   contentBase: "./public",//本地服务器所加载的页面所在的目录
   colors: true,//终端中输出结果为彩色
   historyApiFallback: true,//不跳转
   inline: true//实时刷新
  }
}

                  好了此时我们在命令行中执行:

                  webpack-dev-server --progress --port 8888

                  然后打开浏览器输入localhost:8888,则会看到页面结果

                  我们可以看到，我们修改了代码一保存，浏览器就会自动刷新出结果，也就验证了会自动打包和刷新浏览器。

                  当然了我们又在使用webpack-dev-server –progress –port 8888命令了，万一忘了命令少写一个字母，那不是麻烦，当然根据前面的经验，我们可以配置到package.json的script中

                  {
  "name": "webpacknotedemo","start": "webpack-dev-server --progress --port 8888" //修改此处 },"dependencies": { "webpack": "^1.13.3" },"devDependencies": { "webpack-dev-server": "^1.16.2" } }

                  然后我们在命令行只需要输入npm start就达到和上面一样的效果了，这里不演示了，大家自行去试验。

                  4、配置Loaders

                  1、Loaders了解和简单的React项目

                  Loaders可以说是webpack最让人兴奋的功能之一了，通过各种Loaders可以完成不同的功能，比如React一些合适的Loaders(Babel)可以把React的JSX文件转换成JS文件

                  1、Loaders是需要单独安装的而且要在webpack.config.js中去配置，要在modules关健字下进行配置，loaders配置的选项

                  Loaders配置项 功能描述 是否必须
                  test 匹配loaders所处理的文件的拓展名的正则表达式 必须
                  loader loader的名称 必须
                  include/exclude 手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹） 可选
                  query 为loaders提供额外的设置选项 可选

                  2、我们在上面例子上修改改造成React项目

                  • 1、安装react和react-dom
                    • @H_403_16@ 
                    npm install react --save
npm install react-dom --save
                    • 2、由于我们要使用ES6语法和使用JSX语法，所以要装Babel
                      • @H_403_16@

                      Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：

                      下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；使用基于JavaScript进行了拓展的语言，比如React的JSX

                      npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
                      • 3、安装了loader肯定是要配置webpack.config.js的，下面看配置
                        • @H_403_16@ 
                        module.exports = {
  entry: __dirname +"/app/main.js",//打包后文件存放的目录
    filename:'bundle.js' //打包后输入的文件名
  },devServer:{
   contentBase: "./public",//本地服务器所加载的页面所在的目录
   colors: true,//终端中输出结果为彩色
   historyApiFallback: true,//不跳转
   inline: true//实时刷新
 },//新增加部分
 module:{
   loaders:[
   //babel配置
   {
     test:/\.js$/,exclude: /node_modules/,loader: 'babel',query: {
        presets: ['es2015','react']
     }
   }
 ]
 }
}
                        • 4、修改main.js
                          • @H_403_16@ 
                          import React from 'react' ;
import ReactDOM from 'react-dom' ;

import Hello  from './helloworld.js';

ReactDOM.render(
  <Hello />,document.getElementById('container')
);
                          • 5、修改helloworld.js
                            • @H_403_16@ 
                            import React from 'react';
class Hello @H_502_720@extends React.Component{
    render(){
        return(
            <div>
                hello world
            </div>
        )
    }
}

module.exports = Hello
                            • 6、在命令行执行npm start,查看效果
                              • @H_403_16@

                              我靠竟然报错了，不过不怕，我们来解决，解决这个问题，就是在根目录新建一个.babelrc 输入以下内容

                              //.babelrc
{
  "presets": ["react","es2015"]
}

                              然后运行npm start,再查看浏览器，完美输入Hello world

                              这样我们就简单的创建了一个React项目了

                              2、使用css

                              一个页面没有css那只是一个垃圾，所以我们看如何使用css的loader

                              还是在上面React的例子上去继续

                              webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

                              1、安装

                              npm install style-loader css-loader --save-dev

                              2、修改webpack.config.js

                              module.exports = {
  entry: __dirname +"/app/main.js",module:{
   loaders:[
   //babel配置
   {
     test:/\.js$/,},//新增加的配置
   {
        test: /\.css$/,loader: 'style!css?modules'//添加对样式表的处理
   }
 ]
 }
}

                              注意:上面我们添加了一个?modules，这个可以不添加，但是你想模块化使用，比如在每个js中import进来这个css文件，那么就要添加上?modules

                              解释一下css module

                              css modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块,也就是把css给模块化了，就像是React中的一个个的组件一样，然后组合着使用，通过import来使用

                              3、在app目录下添加style.css

                              .root { background-color: orange; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.button{ background-color: #ffeecc; border-width: 2px; width:100px; margin: 10px; border-color: red; border-radius: 8px; }

                              4、修改helloworld.js

                              这次修改的量比较大，我们做一个有意义的事情，光helloworld也没有意思

                              import React from 'react';
//通过import来引进样式
import styles from './styles.css' ;
class Hello extends React.Component{

constructor(props) {
  super(props);
  this.state = {
    name:''
  };
}

  render(){
      return(
      <div className={styles.root}>
        <h2>用户登录</h2>
         <form ref='addForm' action="#">
            <p>
                <label htmlFor="name">姓名:</label><input type="text" id="name" ref="name" placeholder="请输入用户名"/>
            </p>
            <p>
               <label htmlFor="pass"> 密码:</label><input type="password" id="pass" ref="pass" placeholder="请输入用户名"/>
            </p>

            <input type="submit" value="登录" onClick={this._login.bind(this)} className={styles.button}/>

            <input type="reset" value="清空" className={styles.button}/>
            <div>
                {this.state.name?"欢迎"+this.state.name+"登录！！！":null}
            </div>
         </form>

      </div>
        )
    }

    _login(){
        let name = this.refs.name.value;
        let pass = this.refs.pass.value ;
        if(name.length==0 ||pass.length==0){
            alert('用户名或密码不能为空')
        }else{
          this.setState({
              name:name
          })
        }
    }
}

export default  Hello

                              上面是一个简单的登录界面，我们可以看到我们通过import引入了style样式，然后通过style.xxx来设置样式

                              注:由于class是React中的关键字，所以我们设置style的时候不能使用calss,而要使用className,同理也不能使用for要使用htmlFor,比如label中

                              5、npm start来看结果

                              如果不出什么问题就会看到下面的页面

                              可以看到我们设置的css样式起作用了，按钮和背景都有变化了

                              图片显示使用url-loader 和file-loader配合使用，然后图片就用require(‘xxx.png’)来引用

                              PS：由于文章中使用的webpack和demo中的webpack版本不一致，会导致webpack.config.js配置会有不同，这是版本所致，所以不要说文章中的配置是错误的，demo中使用的的webpack版本是2.2.1，而文章中所使用的webpack版本是1.13.3，webpack2和wepack1的配置还是有点区别的。

                              填坑之旅

                              1、在webpack中使用使用以下属性

                              static defaultProps = {
     haha:"text" 
};

static propTypes = {
     prop: React.PropTypes.Type
};

                              报类似于如下错

                              解决办法就是安装babel-preset-stage-0

                              npm i babel-preset-stage-0 --save

                              然后配置.babelrc添加”stage-0”即可

                              {
  "presets": ["react","es2015","stage-0"] }

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作