国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack+react項(xiàng)目初體驗(yàn)——記錄我的webpack環(huán)境配置

csRyan / 2047人閱讀

摘要:安裝寫(xiě)在里安裝和配置和之前一樣用來(lái)處理文件相關(guān)的這個(gè)包括的就比較多,有,后面兩個(gè)是為了寫(xiě)和服務(wù)。

這兩天學(xué)習(xí)了一些webpack的知識(shí),loaders+plugins真的很強(qiáng)大!不過(guò)配置起來(lái)也很復(fù)雜,看了一些文章,自己也寫(xiě)了項(xiàng)目練手,寫(xiě)下來(lái)加深自己的印象。

首先,非常非常推薦的幾篇文章,初學(xué)者一定要看!
<入門Webpack,看這篇就夠了>
http://www.jianshu.com/p/42e1...
(標(biāo)題一點(diǎn)也不夸張,非常適合0基礎(chǔ))

https://zhuanlan.zhihu.com/p/...
https://zhuanlan.zhihu.com/p/...
https://zhuanlan.zhihu.com/p/...
(這個(gè)系列有三篇文章,第三章是一個(gè)webpack+react的小項(xiàng)目,跟著做一遍會(huì)很有收獲~)

另外,也推薦看一下阮一峰e(cuò)s6書(shū)中module這一章,弄清楚export/import/export default等等命令,畢竟webpack的各個(gè)模塊是靠export/import/require(commonjs)鏈接起來(lái)的,所以這些都要掌握。

具體到項(xiàng)目的話,webpack有幾個(gè)比較基本的概念:
1、loaders:通過(guò)不同的loaders,webpack可以處理各式各樣的文件,然后打包到一個(gè)文件中(比如bundle.js);
2、plugins:plugins是為了拓展webpack的功能的,和loaders不同的是,loader是用來(lái)處理單個(gè)文件的(比如json-loader處理.json,sass-loader處理.scss),但是plugins是直接對(duì)整個(gè)構(gòu)建過(guò)程進(jìn)行處理(比如自動(dòng)生成html文件的html-webpack-plugin);
3、others: 這些我也不知道要?dú)w到哪里去,但是在配置中也是必不可少,包括webpack-dev-server/source-map等等,后面會(huì)具體說(shuō);
4、配置文件:我這個(gè)小項(xiàng)目包括的文件有.babelrc(用來(lái)處理babel),webpack.config.js(webpack項(xiàng)目基礎(chǔ)配置文件),package.json(這個(gè)文件會(huì)記錄所有的devDependencies)。

然后我們就一項(xiàng)一項(xiàng)來(lái)分析吧:

1、loaders
1) style-loader / css-loader / sass-loader

這幾個(gè)loader用來(lái)處理.css和.scss文件,一起安裝用空格隔開(kāi):

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

同時(shí)修改webpack.config.js:

module: {
        loaders: [
        {
            test: /.scss$/,
            //loaders是依靠正則表達(dá)式來(lái)測(cè)試這個(gè)文件是不是這個(gè)loader來(lái)處理,所以test不能少
            loaders: ["style-loader","css-loader","sass-loader"],
            //"-loader"一定要寫(xiě),不然會(huì)報(bào)錯(cuò)
            //loaders的處理順序是從右向左,就是會(huì)先用sass-loader,其次css-loader,再次style-loader
        }  
        
2) url-loader

這個(gè)loader是用來(lái)處理url鏈接,就是圖片或者其他靜態(tài)文件。
安裝:

$ npm install --save-dev url-loader

webpack.config.js (寫(xiě)在module里):

    {
            test: /.(png|jpq)$/,
            loader: "url? limit = 40000"
        }
3) json-loader

安裝和配置和之前一樣~用來(lái)處理json文件

4) babel相關(guān)的loaders:

這個(gè)包括的就比較多,有babel-core/babel-loader/babel-preset-es2015/babel-preset-react,后面兩個(gè)是為了寫(xiě)es6和react服務(wù)。

    //webpack.config.js
        {
            test: /.jsx$/,
            loader:"babel-loader",
            include: APP_PATH,
            //這個(gè)include是說(shuō)只對(duì)這里面的文件負(fù)責(zé),還有一個(gè)對(duì)應(yīng)的exclude,就是忽略范圍內(nèi)的文件, 比如:exclude: "./node_modules/";
        }

另外因?yàn)閎abel需要寫(xiě)的選項(xiàng)比較多,可以配一個(gè).babelrc在根目錄下:

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

以上就是用的比較多的loaders,配完這些webpack就可以處理json/sass/es6啦~

2、plugins
1) html-webpack-plugin

這個(gè)插件的作用就是自動(dòng)生成html(其實(shí)也可以自己寫(xiě),就是加了個(gè)bundle.js的script而已,不過(guò)感覺(jué)比較酷):
plugins安裝好了之后要放在webpack.config.js的plugins的數(shù)組里,不要寫(xiě)在modules里呀~

    //webpack.config.js
    plugins: [
        new HtmlWebpackPlugin({
        //在最前面先定義下HtmlWebpackPlugin--
        //var HtmlWebpackPlugin = require("html-webpack-plugin");
            title: "searchBar",    //配合html-webpack-plugin的配置
        })
    ],
2) react-transform-hrm

HMR是一個(gè)webpack插件,它讓你能瀏覽器中實(shí)時(shí)觀察模塊修改后的效果,但是如果你想讓它工作,需要對(duì)模塊進(jìn)行額外的配額;
Babel有一個(gè)叫做react-transform-hrm的插件,可以在不對(duì)React模塊進(jìn)行額外的配置的前提下讓HMR正常工作;
安裝:

$ npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置:

//webpack.config.js (plugins里)
new webpack.HotModuleReplacementPlugin();

然后修改下.babelrc:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
       }]
     }]]
    }
  }
}

這樣在使用react的時(shí)候就可以熱加載模塊了~

3)UglifyJsPlugin:

壓縮JS代碼;

4)ExtractTextPlugin:

分離CSS和JS文件;
以上兩個(gè)插件這次沒(méi)有用,先記下來(lái)下次用過(guò)了再來(lái)補(bǔ)~

3、others
1) webpack-dev-server

用來(lái)構(gòu)建本地開(kāi)發(fā)的服務(wù)器,可以讓瀏覽器監(jiān)測(cè)代碼的修改,并自動(dòng)刷新修改后的結(jié)果;
安裝:

$npm --save-dev webpack-dev-server

webpack-dev-server有以下幾個(gè)配置選項(xiàng):

contentBase:默認(rèn)webpack-dev-server會(huì)為根文件夾提供本地服務(wù)器,如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器,應(yīng)該在這里設(shè)置其所在目錄(本例設(shè)置到“public"目錄)

port:設(shè)置默認(rèn)監(jiān)聽(tīng)端口,如果省略,默認(rèn)為”8080“

inline:設(shè)置為true,當(dāng)源文件改變時(shí)會(huì)自動(dòng)刷新頁(yè)面

historyApiFallback:在開(kāi)發(fā)單頁(yè)應(yīng)用時(shí)非常有用,它依賴于HTML5 history API,如果設(shè)置為true,所有的跳轉(zhuǎn)將指向index.html

//webpack.config.js
devServer: {
           contentBase: "./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄
           historyApiFallback: true,//不跳轉(zhuǎn)
           inline: true//實(shí)時(shí)刷新
       }

//package.json
 "scripts": {
    "start": "webpack-dev-server --inline",
  }

然后就可以用http://localhost:8080/index.html預(yù)覽項(xiàng)目啦~

2)source-map:

source maps提供了一種對(duì)應(yīng)編譯文件和源文件的方法,使得編譯后的代碼可讀性更高,也更容易調(diào)試。
在學(xué)習(xí)階段和寫(xiě)中、小型項(xiàng)目的時(shí)候,用eval-source-map,如果是開(kāi)發(fā)大型項(xiàng)目可以用cheap-module-eval-source-map,會(huì)更快。

//webpack.config.js
devtool: "eval-source-map",
3) 第三方庫(kù):

這個(gè)就包括一些我們比較了解的比如react/react-dom/jquery/moment/bootstrap等等啦,配置起來(lái)也很方便,首先是安裝:

$npm --save-dev jquery moment react react-dom
$npm install bootstrap@4.0.0-alpha.2 --save-dev

然后在你需要的js文件里引用這些庫(kù):

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

var $ = require("jquery");
var moment = require("moment");

然后就可以愉快地寫(xiě)各種js、jsx文件啦~

4、配置文件

最后我們來(lái)講一講幾個(gè)配置文件的問(wèn)題:

1) webpack.config.js

上面提到的都是各種肢解,我這次的config文件是這樣的:

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

module.exports = {
    devtool: "eval-source-map",
    entry: __dirname + "/app/index.jsx",
//webpack的入口文件只有一個(gè),所以寫(xiě)的所有components甚至包括css/json什么的,都要引用在這里
output:{
    path: __dirname +"/public",
    filename: "bundle.js",
},
//我這邊是新建了一個(gè)folder叫public,用來(lái)放index.html和bundle.js
devServer: {
    contentBase: "./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄
    historyApiFallback: true,//不跳轉(zhuǎn)
    inline: true//實(shí)時(shí)刷新
},
plugins: [
    new HtmlWebpackPlugin({
        title: "searchBar",    //配合html-webpack-plugin的配置
    })
],
module: {
    loaders: [
    {
        test: /.scss$/,
        loaders: ["style-loader","css-loader","sass-loader"],
    },{
        test: /.(png|jpq)$/,
        loader: "url? limit = 40000"
    },{
        test: /.jsx$/,
        loader:"babel-loader",
        include: APP_PATH,
    }]
},
resolve:{
        extensions: ["",".js", ".jsx"]
    },
};
2) package.json

這個(gè)文件會(huì)在你最開(kāi)始npm init的時(shí)候就生成,一路回車就可以,后來(lái)都可以改~

{
  "name": "serach-bar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --profile --colors --hot",
    "build": "webpack --progress --profile --colors",
    "test": "karma start"
  },
 //scripts這邊可以改一下,改start可以,在終端用npm start,上面有例子~這邊的dev要改的話在終端的命令是"npm run dev;
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-react-hmre": "^1.1.1",
    "bootstrap": "^4.0.0-alpha.2",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "html-webpack-plugin": "^2.28.0",
    "jquery": "^3.1.1",
    "jshint": "^2.9.4",
    "jshint-loader": "^0.8.3",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.3.3",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

裝了很多dev,其實(shí)用不著那么多哈哈~

3) .babelrc
{
    "presets":["react","es2015"],
    "env":{
    "development":{
    "presets":["react-hmre"]
    }
    }
}

ok,這樣就差不多啦~另外還要注意的是index.jsx/index.js,所有的components都要引用過(guò)來(lái),css/scss也是,css文件的話最好有一個(gè)main.css進(jìn)行整合,這樣不會(huì)漏掉。
看一眼這次的index.jsx:

// "注意這些import
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "./main.scss";
import React from "react";
import ReactDOM from "react-dom";
import Search from "./components/search";
import Plist from "./components/plist";

class App extends React.Component{
    constructor(props){
        super(props);
        this.state={"keyword":""};
        this.refreshKeyword = this.refreshKeyword.bind(this);
    }
    refreshKeyword(name){
        this.setState({"keyword":name});
    }
    render(){
        return (
            

Search Github Users

) } }; const app = document.createElement("div"); document.body.appendChild(app); ReactDOM.render(, app);

恩,差不多就是這樣啦~~項(xiàng)目初始化的時(shí)候不要忘記npm install --save-dev webpack哦!coding愉快!

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/81403.html

相關(guān)文章

  • webpack4.0體驗(yàn)、各版本及parcel性能對(duì)比

    摘要:前段時(shí)間又發(fā)布了新版本我接觸的時(shí)候已經(jīng)版本了支持的版本必須打包速度大小比較以及粗淺的試了一下下圖所示,黃色為版本綠色為我寫(xiě)的配置,跟基本相似,具體不同下面會(huì)介紹藍(lán)色是自帶的模式紅色為具體大小速度大家可以比較一下,還是很給力的關(guān)于配置方面,應(yīng) 前段時(shí)間webpack又發(fā)布了新版本webpack4我接觸的時(shí)候已經(jīng)4.1版本了node支持的版本必須node: >=6.11.5 webpack...

    MarvinZhang 評(píng)論0 收藏0
  • webpack打包體驗(yàn)

    摘要:確保在和環(huán)境下,如果沒(méi)有,先安裝環(huán)境。我的新建一個(gè)文件夾,在命令行里進(jìn)入執(zhí)行此時(shí),文件夾下多了一個(gè)文件。本文僅獻(xiàn)給初學(xué)的同學(xué),功能強(qiáng)大,想要學(xué)好仍需多多學(xué)習(xí)。 1、確保在node和npm環(huán)境下,如果沒(méi)有,先安裝node環(huán)境。我的node: showImg(https://segmentfault.com/img/bVbu1T2); 2、新建一個(gè)文件夾web,在命令行里進(jìn)入web,執(zhí)行 ...

    canopus4u 評(píng)論0 收藏0
  • React結(jié)合TypeScript和Mobx體驗(yàn)

    摘要:結(jié)合編輯器可以推導(dǎo)變量對(duì)應(yīng)的類型以及內(nèi)部的結(jié)構(gòu),提高代碼的健壯性和可維護(hù)性。通過(guò)充分利用時(shí)間回溯的特征,可以增強(qiáng)業(yè)務(wù)的可預(yù)測(cè)性與錯(cuò)誤定位能力。對(duì)于對(duì)象的哪部分需要成為可觀察的,提供了細(xì)粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 為什么要使用TypeScript 偵測(cè)錯(cuò)誤 通過(guò)靜態(tài)類型檢測(cè)可以盡早檢...

    dreambei 評(píng)論0 收藏0
  • npm + webpack + es6 體驗(yàn)

    摘要:當(dāng)然,我們需要先下載配置下載和配置下載下載的加載器下載完了,要去進(jìn)行配置,配置完的文件如下可以看到,和之前的相比,增加了一個(gè)的配置。 準(zhǔn)備 下載Node.js和npm 一個(gè)命令行工具(我的是git bash)。不是必須的,用自帶的命令行也可以。 創(chuàng)建一個(gè)文件夾,作為根目錄,比如 npm-webpack-es6 這時(shí),你將看到一個(gè)空文件夾 開(kāi)始 命令行打開(kāi)至根目錄 鍵入 npm i...

    seasonley 評(píng)論0 收藏0
  • 手把手教你從零搭建react局部熱加載環(huán)境

    摘要:有沒(méi)有辦法實(shí)現(xiàn)就局部刷新呢當(dāng)然是有第十步執(zhí)行為了實(shí)現(xiàn)局部熱加載,我們需要添加插件。 前言 用了3個(gè)多月的vue自認(rèn)為已經(jīng)是一名合格的vue框架api搬運(yùn)工,對(duì)于vue的api使用到達(dá)了一定瓶頸,無(wú)奈水平有限,每每深入底層觀賞源碼時(shí)候都迷失了自己。 遂決定再找個(gè)框架學(xué)習(xí)學(xué)習(xí)看看能否突破思維局限,加上本人早已對(duì)React、RN技術(shù)垂涎已久,于是決定找找教程來(lái)學(xué)習(xí)。無(wú)奈第一步就卡在了環(huán)境搭...

    quietin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<