从0开始二个React项目,webpack打包react项指标兑现

2019-05-25 18:38 来源:未知

1webpack简介

方今想做1个网站,起先选型为react koa mangodb,想把温馨彻彻底底、从无到有的学习和平解决决难点的历程做个详细的、系统的笔录,方便日后纪念。
是因为开荒和结尾网址中可能有亟待利用也许借鉴webpack的地方,本文先从介绍如何利用webpack开头一个体系,中间会有穿插自个儿尝尝进度中的一些难点和设法,最终简短介绍webpack原理。希望对别的人也能有些一线的接济。具体网址和法力会在再而三再3再四串小说中介绍。
初写小说,水平有限,用尽全力地小心和可信赖,迎接路过的各位提议宝贵意见。

大家实现效能丰裕的使用,具有卷帙浩繁的js代码和一大堆正视包,模块化,less等css预管理。

webpack是眼前最盛行的卷入工具之1,是一个为前端模块打包营造而生的工具,它既吸收了汪洋已有的方案优点和教训,也化解了重重前端开拓进程中已有的痛点,如代码的拆分与异步加载,对非js财富的支撑,庞大的loader设计使得它更像是一个营造平台,而不是包装工具。

1. webpack是什么

那些改进确实大大提供了小编们付出作用,不过采纳他们的开拓的文件大家须要相当的管理才干让浏览器度和胆识别,手动管理极度复杂,那就为webpack类的工具提供了供给;

2webpack,react开垦条件

什么样是前者打包

提及webpack,就能够波及打包,前端打包是指对项目代码进行编写翻译、压缩、混淆、合并、拆分、优化等操作,打包的目标是为着将es6/scss等这个部分浏览器不能够管理的言语转变来es5/css这种浏览器可识其余,以及减小网络加载时间,安全性等,尽也许让开拓者的生气集中在事情支付进程中。个人理解打包工具是在不改动程序成效逻辑的情事下,对品种代码实行拍卖和优化。

1、什么是webpack?

webpack能够看成模块打包机,它做的事务是深入分析你的类型结构,找到js模块和预设的css,打包为方便的格式以供浏览器选用;

webpack的干活格局是:把您的等级次序作为八个完整,通过三个加以的主文件(main.js),

webpack将冲那些文件中找到这些类型的兼具注重文件,使用loaders管理它们,最终打包为二个浏览器能识别的JavaScript文件;

1)新建2个类型文件夹,进入此文件夹,成立package.json文件(npm init命令)

webpack的作用

此地引用webpack官网团结的定义:

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.

这段话的大致意思是webpack在拍卖你的门类时,会从进口文件递归注重包,最生平成一个被浏览器引用的bundler文件。这里重申的是“重视”,webpack日常会依附入口文件相继向下,找到每种正视财富(js/css/png/scss等),并将他们打包在四个文件里,在那些文件里给各类财富编上序号,当然,当项目极大时,webpack也足以设置七个入口来递归。随着es6的放大,以及模块化观念的渐渐扩散,webpack这样做的便宜多多,能够编写翻译es6/react,能够从bundler文件中抽离公共信赖包,能够按需加载等等。

2、先河应用webpack

二)确认已设置webpack,web pack-dev-server模块

webpack的优势在哪,和gulp、grunt有哪些分别

  • webpack是1种模块化的解决方案,每一个财富都以二个模块,通过安顿能够对模块的合并管理来到达目标,方便火速。
  • gulp是基于流的构建筑工程具,财富就如水流同样流过三个个坑,每一个坑里可以举办缩并编写翻译,以及自定义的营造职务等,最终流出结果。和webpack比是例外的拍卖形式。
  • grunt和gulp类似,不过出于它I/O进程会转换不常文件,成效十分低。

安装:

npm install webpack -g

npm install webpack --save-dev //安装到您的体系中

三)安装babel(babel不懂的请先看)babel的目标有八个(将es陆转为es5,转变jsx语法),

2. 什么利用webpack打包react es陆的种类

说了重重,下边就从发轫化3个项目初始选拔和介绍webpack,体会webpack对模块和能源依赖的管制。
先创建项目,命令行推行:

mkdir jsfiddle
cd jsfiddle
npm init

更迅捷的施行打包职分:

对其安插能够动用轻松的npm start命令来替代,在package.json中对npm的剧本进行

安装如下:

{

“name”:“”,

“scripts”:{

“start”:“webpack”约等于npm start命令实行npm webpack命令

}

}

在package.json中的脚本部分已经暗中同意在命前边增加了node_modules/.bin路径,

于是随意全局是或不是安装webpack,在极限都无需在前面加多详细的门道;

npm的start是叁个非常的本子名称,在指令行中能够间接使用npm start;

一旦您在scripts中布局的不是start,想要在命令行中推行,须求用npm run {scripts name}

举个例子您布署的是build,需施行命令  npm run bulid;

4) 安装babel-preset-es2015和babel-preset-react

安装webpack

npm i webpack -g

3、webpack的无敌功用

生成 source maps(便于调节和测试)

包装后的公文大家是不易于找到出错地方的,使用source maps帮大家消除此主题素材;

因而配备,webpack在卷入的时候可认为我们生成 source maps,为大家提供三个

对应编写翻译文件和源文件的主意,使编译后的代码可读性高,便于调节和测试;

在webpack的计划文件中配置source maps,供给配备devtool,他有肆中差异的配置选项;如下:

在念书阶段以及小到中性的项目上,eval-source-map使用照旧比较好的,

唯独只可以在开采阶段使用它,配置如下

devtool: "eval-source-map"

5)安装babel-loader和 babel-core

安装react

npm i react react-dom --save

类型根目录下开创src文件夹,里面创设app.jsx,app.jsx里面写入最普及的react代码:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.querySelector('#app')
);

现阶段直接在某些html中引入app.jsx是对事情没有什么帮助的,因为浏览器不懂分析react和es六代码,因而大家要求将它调换来es5。供给留意的是:

  • Chrome和Firefox已经支撑部分es6的特征了,可以直接在决定台里尝试。但付出多数都以用Babel转码成es五的,react也足以透过babel转码。
  • 平常es六职能的测试能够在这么些网站上试地址

以上都只适用于某些文件或某段代码的转码,当管理项目范围的广大文本时,webpack就足以选派用场了。通过webpack引进babel-loader,让babel将.jsx转码成es伍的代码在浏览器中运转。loader是webpack配置文件中管理某一项目文件的插件,这里大家将js和jsx文件用babel-loader管理。

四、使用webpack营造地面服务器:

浏览器检查实验代码修改,浏览器时时刷新,webpack提供了一个可选的当地开垦服务器;

那么些地面服务器基于nodejs构建, 它是一个独立的组件,

在webpack中张开安排以前须要单独安装它看成项指标依赖;

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

webpack 中devserver配置选项

contentBase:私下认可webpack-dev-server注重包为为根文件提供本地服务器,假诺想为此外八个索引下的文书提供地点服务器,应其在此处安装(设置到public目录下);

port:设置暗中同意监听端口,要是简单,私下认可是8080

inline:设置为true,当源文件修改时会自动刷新页面;

colors:设置为true,使终端输出的文件为彩色的;

historyApiFallback :在付出单页面应用特别有用,它依靠于html五 history api,设置未true,全体的跳转将指向index.html;

devServer: {

contentBase: './public',//温蒂服务器所加载页面包车型地铁目录;

colors: true,//终端输入结果为花团锦簇

inline: true//实时刷新

}

陆)babel专门的学问须要.babelrc文件

安装babel-loader

阮一峰先生有一篇小说特地介绍babel安装。这里大家一向连同es6/react规则一齐安装,babel-loader技术依赖presets中的规则转码。“规则”是指babel依照源文件内容的类型实行转码,比方大家要将es六和react转码。

npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

伍.loaders:webpack打包处理器

loaders是webpack动人心魄的机能,通过使用不相同的loader,webpack通过调用调用外部的台本大概工具得以对各式各样的文本实行拍卖,例如说剖判json文件并把ta转化为js文件,恐怕把下一代js文件(es6,es七)转化为今世浏览器能够辨其余js文件,或然说对react开荒来说,合适的loaders可以把react的jsx文件转发为js文件;

loaders要求独自安装还要自webpack.config.js 下的module关键字张开安顿,loadeers的陈设选项包括如下:

test:三个相配loaders处理的公文正在表明式;(必须)

loader:loader的名称(必须)

include/exclude 手动增加必须管理的公文(文件夹)/屏蔽无需管理文件也许文件夹(可选);

query:为loaders提供额外的设置选项(可选);

loaders很好,但是有一点loaders使用起来比较复杂,比不上说babel;

5.1  babel

babel其实是三个编写翻译JavaScript的平台,它的强有力之处是透过编写翻译达到以下目标:

--管理JavaScript的es6,es7,被浏览器所识别;

--使用基于JavaScript,管理react的jsx;

babel的设置和安插:

babel是多少个模块的包,个中央位于号称babel-core的npm包中,可是webpack把他们组成在一齐行使,可是对于每2个您独自行使的功效和强大,你供给单独安装包(比方用的比较多的分析es陆的babel-preset-es20一伍包和解析react的jsx的babel-preset-react包)

小编们能够叁回性安装三个依赖的模块,之间用空格隔离:

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react

module: {

loaders: [

{

test: /.json$/,

loader: "json"

},

{

test: /.js$/,

exclude: /node_modules/,

loader: 'babel',//在webpack的module部分的loaders里举行配置就能够

query: {

presets: ['es2015','react']

}

}

]

},

铺排好webpack将来就能够运作使用es六和jsx的语法了,用地方的张开测试,要选拔react,必须先安装react和react-dom;

{
 "presets":["react","es2015"]
}

根目录下创造.babelrc文件对babel实行布署,并安装转码规则。

{
  "presets": [ "es2015", "react" ]
}

陆.1切皆为模块:

webpack有二个不可能不说的亮点,它把具有的文本都能够用作模块管理,包含你的JavaScript文件,

css,fonts以及图片都得以透过创造的loaders实行模块化处理;

七)最根本的webpack.config.js文件的陈设

根目录下创办webpack.config.js,运行webpack时会自动读取它来进展铺排。

var path = require('path');
module.exports = {
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, "dist/js/"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /.js|jsx?$/,
        loader: 'babel-loader',
        options: {
          presets: ["es2015" ,"react"]
        }
      }
    ]
  }
}

下面的安插依次是进口entry,输出output, 管理模块和规则module.rules,这里有
介绍,运行:

webpack

能够见到新建了dist/js目录,并生成了main.js,它有160KB怎么这么大??? 因为前边说过会从入口文件(app.jsx)把依赖(react.js)打到3个文本里,也就output中钦定的路径和文书。

大家在根目录下开创index.html,创造app元素,引入dist/js/main.js

<div id="app"></div>
<script type="text/javascript" src="./dist/js/main.js"></script>

最后,浏览器打开index.html就能够看出Hello world!

7. css

webpack提供五个工具处理样式表,css-loader和style-loader,两个职责分裂,css-loader使您可见利用类似@import和url的方法完结require的功效,style-loader将所有总括后的体制加入页面,两个接纳令你把体制嵌套于到webpack打包后的js文件中;

安装:

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

普普通通的场馆下。css和js会打包到一个文件中,css并不会卷入为三个独立css文件,然而能够因而适当的webpack配置也足以把css打包三个独门的文件;

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var APP_PATH = path.resolve(ROOT_PATH, 'app');

module.exports = {
 entry: {
 app: path.resolve(APP_PATH, 'app.js')
 },
 output: {
 path: BUILD_PATH,
 filename: '[name].bundle.js'
 },
 resolve:{
 extensions:['','.js','.jsx'],
 root:APP_PATH
 },
 module:{
 loaders:[
  {
  test: /.js?$/,
  loaders: ['babel-loader'],
  include: APP_PATH
  }
 ]
 },
 plugins:[
 new HtmlwebpackPlugin({
  title: 'demo',
  filename:'index.html'
 }),
 ]
}

Question

7.1 css  预管理器

css的管理平台postcss,他能够扶助你你的css实现越多的功力;

怎么行使PostCss,咱们使用postcss为css代码管理自动抬高适应分裂浏览器的css前缀;

率先安装postcss-loader和autoprefixer(自动抬高前缀的插件)

npm install  postcss-loader  autoprefixer

在webapck配置文件中开展示公布局,只须求新建3个postcss关键字。并在其间注明重视的插件,

postcss: [

require('autoprefixer')//调用autoprefixer插件

],

到近期,本文已经涉嫌到拍卖js的babel和处理css的postcss,他们是八个单身的阳台,

以此理应是最简便易行的陈设了,不懂的能够互连网搜,在那之中用到HtmlwebpackPlugin

Q一: 如何打包css ?

假若我们react代码中引进css,

import './index.css';

要打包css怎么办?
对,webpack.config.js中module.rules下添加rule。

{
  test: /.css$/,
  loader: 'css-loader'
}

并且,安装css-loader:

npm i css-loader --save

再次创下设贰遍,能够看看main.js中一度有了css的代码。
像scss,图片等想要打包都急需webpack.config.js中安插,并安装相应的loader才可,这里有各loader的列表。
注意,每回退换源文件,记得运营webpack卷入才有机能。

8. plugins (插件)

plugins是用来扩张webpack效率的,他会在漫天营造进度生效;

loaders和plugins区别:

loaders是webapck实行打包创设进程中对源文件(css,js,jsx,less)进行拍卖,叁回拍卖2个,

plugins并不是直接操作单个文件,它直接对总体创设进程起效果;

选择插件的点子:

若是用摸个插件,我们需求用npm install 安装它,然后要做的正是webpack配置中的plugins关键字中增添插件的一个实例(plugins是1个数组),上面例子,大家加多了八个贯彻版权表明的插件

plugins: [

new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在那些数组中new叁个就足以了

],

以此插件是帮大家自动生成html页面,并自行引入打包后的.js文件,其中的参数意思是,title那个页面包车型地铁title,filename生成的页面名字

Q二: 作者不想把css打在js中,应该如何是好 ?

需要extract-text-webpack-plugin抽离css 地址,先安装,然后在上方require,记得安装style-loader,上边修改原来的装置。

{
  test: /.css$/,
  // loader: 'css-loader',
  loader: extractTextPlugin.extract({
    fallback: "style-loader",  // use失败时使用
    use: "css-loader"          // 抽离css的loader
}

并且,安装css-loader:

npm i css-loader --save

最终在最外层plugin中丰硕:

plugins: [
  // 上面需要require('extract-text-webpack-plugin')
  new ExtractTextPlugin("styles.css"),     
]

就能够将本来打包在main.js中的css抽离到styles.css中。由于将来css可与js并行加载,以及能够独立缓存,能够优化互连网加载时间。

再营造三回,能够见见main.js中早就有了css的代码。
像scss,图片等想要打包都急需webpack.config.js中配备,并安装相应的loader才可,这里有各loader的列表。
注意,每一次退换源文件,记得运转webpack打包才有功力。

捌.1 几个常用的插件

--- HtmlWebpackPlugin:

以此插件的效用是依据二个轻便易行的模板,帮你转移最后的h伍文件,那几个文件中机动引用了您打包后的

js文件,每一次编写翻译都在文件名插入二个例外的哈希值;

npm instal --save-dev  html-webpack-plugin

本条插件达成了作者们后边手动完毕的片段职业,

---  Hot Module Replacement

-


八)最终的项目文件目录为

Q三: 项目下有诸多页面,有个别无法打在一个包里,有个别想打在七个包里?

三个页面,意味着五个入口文件,七个入口文件能够大概地在entry那个字段里安装属性就能够。

entry: {
  entry1: ["./src/app.jsx"],
  entry2: ["./src/app2.jsx"]
},

聊到底各样入口文件都会打三个要好依据关系的独立包。但是又有了新的主题材料,大家开掘每一个react页面包车型客车包都把react放进去了,文件比相当的大,极度时在做spa的时候,无需重复加载,因而,就有了下叁个主题素材。

遍布的webpack配置文件

var webpack = require('webpack');

var htmlWebPlugin = require('html-webpack-plugin');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

entry: __dirname '/app/main.js',

output: {

path: __dirname '/bulid.js',

filename: '[name]-[hash]..js'

},

module: {

loaders: [

{

test: /.json$/,

loader: 'json'

},

{

test: /.js$/,

exclude:/node_modules/,

loader: 'babel'

},

{

test: /.css/,

loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')

}]

},

postcss: [

require('autoprefixer')

],

plugins: [

new HtmlWebpackPlugin({

template: __dirname "/app/index.tmpl.html"

}),

new webpack.optimize.OccurenceOrderPlugin(),

new webpack.optimize.UglifyJsPlugin(),

new ExtractTextPlugin("[name]-[hash].css")

]

}

参照自慕课手记

图片 1

Q四:不一样的信赖包里有联合引用的公共库,举例react,能或不可能把公共库打到四个文书里?

自然能够,那个时候将在动用其它1个plugin(插件),webpack自带的CommonsChunkPlugin

plugins: [
  new extractTextPlugin("[name].css"),
  // 抽离公共库
  // 上面需要require('webpack')
  new webpack.optimize.CommonsChunkPlugin({    
    // 生成的公共库名称,如果为数组则是公共的抽了后放到哪些入口文件中
    name: 'common',    
    minChunks: 2,      // 模块被应用大于等于2次即被抽离
    chunks: ['entry1', 'entry2']  // 从哪些指定的入口文件里抽
  })
]

这么,大家得以看看最终common.js相当大,三个输入文件一点都不大,而且输入文件都引用了的react被打到common.js中去了,CommonsChunkPlugin再有多少个属性能够用来安顿,想详细了然的可以看这里;

app是种类组件文件夹,test是测试文件

Q5: 项目页面诸多,而且工具会被利用于各类档案的次序,不可能去手动定义每一种入口文件,该如何是好?

能够内定有些文件夹,只怕自定义相配就好了。如何是好?
对我们来讲,只要能生成key(文件名):value(路线)的键值对就可以了。这里大家得以应用node-glob,glob能够输入正则相配来赢得文件路线,利用glob我们能够生成该目录下有所文件路线的数组,稍微剖析就能够生成想要的键值对。

// 获取文件夹中文件map名
function getFilesName(path) {
  // 上面需要安装glob(npm i glob)和require('glob');
  // 获取的是[path1, path2]
  var files = glob.sync(path);
  var entries = {};
  var key;
  // 生成{file1: path1, file2: path2}的形式
  files.forEach(function(item, idx) {
    key = item.substring(item.lastIndexOf('/')   1, item.lastIndexOf('.'));
    entries[key] = item;
  });
  return entries;
}

webpack.config.js的进口文件能够这么写:

entry: getFilesName("./src/**.jsx"),

前面,不论多少入口文件,我们只要写在src最外层就可以算作入口文件,也得以改变entry的布局,也只供给更换入口文件夹名,也许转移相称字符串就能够。
到此,webpack使用入门已经实现,前面随着项指标发端,这里的标题也会稳步扩大。

list.js代码

三. webpack原理初探

待续。

import React from 'react';
import uuid from 'uuid';
import ListItem from '../listItem/listItem';

class List extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  items: []
 }
 }
 handleclick() {
 const value = this.refs.addlist.value;
 const str = {
  id: uuid.v1(),
  text: value
 }
 let items = this.state.items;
 items = [...items, str];//合并数值
 this.setState({
  items
 })
 }
 //删除其中的
 deleteItem(id) {
 this.setState({
  items: this.state.items.filter(
  result => result.id !== id
  ),
 });
 }
 render() {
 const ListIt = this.state.items.map(item => {
  return (
  <ListItem key={item.id} name={item} onDelete={this.deleteItem.bind(this)} />
  );
 });
 return (
  <div className="list">
  <input type="text" placeholder="请输入" ref="addlist" />
  <button className="addbutton" onClick={this.handleclick.bind(this)}>添加值</button>
  <ul>
   {ListIt}
  </ul>
  </div>
 );
 }
}

export default List;

listitem.js

import React from 'react';

class ListItem extends React.Component {
 render() {
 const text = this.props.name;
 return (
  <li onClick={() => this.props.onDelete(text.id)}>
  {text.text}
  </li>
 )
 }
}

export default ListItem;

app.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import List from './list/list';

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<List />, app);

9)最后的package.json文件

{
 "name": "csdndemo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "dev": "webpack-dev-server --hot"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.24.0",
 "babel-loader": "^6.4.1",
 "babel-preset-es2015": "^6.24.0",
 "babel-preset-react": "^6.23.0",
 "html-webpack-plugin": "^2.28.0",
 "react": "^15.4.2",
 "react-dom": "^15.4.2",
 "webpack": "^1.14.0",
 "webpack-dev-server": "^1.14.1"
 }
}

运小说种nam run dev

十)后续会有根据那些demo的测试enzyme库的使用,代码检验aslant,flux的应用,redux的应用

以上正是本文的全体内容,希望对我们的学习抱有支持,也盼望我们多多扶助脚本之家。

你可能感兴趣的稿子:

  • 选用CDN加快react webpack打包后的公文详解
  • 浅谈React Webpack 创设打包优化
  • 缓和webpack -p压缩打包react报语法错误的方法
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:从0开始二个React项目,webpack打包react项指标兑现