配置webpack+react環(huán)境

894974231 發(fā)布于2019-08-20 15:59 / 2637人閱讀

摘要：假設(shè)環(huán)境已經(jīng)裝好當(dāng)前目錄創(chuàng)建文件然后當(dāng)前目錄執(zhí)行安裝成功后在當(dāng)前目錄執(zhí)行創(chuàng)建并編輯文件表示要編譯的文件的類型，這里要編譯的是文件裝載的哪些模塊標(biāo)示不編譯文件夾下面的內(nèi)容具體的編譯的類型，表示不壓縮我們需要編譯的是和

假設(shè)node環(huán)境已經(jīng)裝好

當(dāng)前目錄創(chuàng)建package.json文件：

</>復(fù)制代碼 
{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "a test",
  "main": "bundle.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "xxx",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1"
  },
  "dependencies": {
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

然后當(dāng)前目錄執(zhí)行：

</>復(fù)制代碼 
npm install

安裝成功后在當(dāng)前目錄執(zhí)行創(chuàng)建并編輯文件webpack.config.js：

</>復(fù)制代碼 
var path = require("path")
module.exports = {
  entry: "./entry.js",
  output: {
    path:path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  resolve: {
        extensions: [".js", ".jsx"]
    },
  module: {
    loaders: [
      {test: /.css$/, loader: "style-loader!css-loader"},
      {
        test: /.js?$/,//表示要編譯的文件的類型，這里要編譯的是js文件
        loader: "babel-loader",//裝載的哪些模塊
        exclude: /node_modules/,//標(biāo)示不編譯node_modules文件夾下面的內(nèi)容
        query: {//具體的編譯的類型，
            compact: true,//表示不壓縮
            presets: ["es2015", "react"]//我們需要編譯的是es6和react
        }
      }
    ]
  }
}

創(chuàng)建編輯入口文件entry.js:

</>復(fù)制代碼 
import React from "react";
import { render } from "react-dom";
var myDivElement = ;
render(myDivElement, document.getElementById("mountNode"));

創(chuàng)建編輯index.html:

</>復(fù)制代碼

執(zhí)行命令webpack
成功！

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82639.html

相關(guān)文章

React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置

摘要：系列環(huán)境搭建一手動搭建系列環(huán)境搭建二不同環(huán)境不同配置系列環(huán)境搭建三打包性能優(yōu)化實(shí)際項(xiàng)目中，往往不同環(huán)境有不同的構(gòu)建需求。 React系列---Webpack環(huán)境搭建（一）手動搭建React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化實(shí)際項(xiàng)目中，往往不同環(huán)境有不同的構(gòu)建需求。比如開發(fā)、測試和生產(chǎn)環(huán)境對應(yīng)的后端接口地...

coordinate35 2019-08-20 17:35 評論0 收藏0
React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點(diǎn)我也會進(jìn)行簡明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。前言前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議：如果對Weex App感興趣，應(yīng)該選擇vue框架；如果...

cnio 2019-08-21 17:47 評論0 收藏0
React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點(diǎn)我也會進(jìn)行簡明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。前言前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議：如果對Weex App感興趣，應(yīng)該選擇vue框架；如果...

GHOST_349178 2019-08-01 18:04 評論0 收藏0
最小白的webpack+react環(huán)境搭建

摘要：接下來安裝和，執(zhí)行命令安裝很順利，沒有遇到任何問題。再總結(jié)一下我們遇到的坑初始化時(shí)的項(xiàng)目名稱要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。另外再增加，這樣刷新的速度會大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容本文也同步發(fā)表在我的公眾號“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個(gè)最簡單的webpack+react環(huán)境。最近在玩webpack+rea...

番茄西紅柿 2019-04-23 13:28 評論0 收藏0
React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化

摘要：的選項(xiàng)中，是文件的輸出路徑是暴露的對象名，要跟保持一致是解析包路徑的上下文，這個(gè)要跟下面要配置的保持一致。最后修改一下模板，增加引用文件給入口文件再加點(diǎn)依賴模塊，方便打包觀察運(yùn)行打包可以看到，入口文件里依賴的，模塊，直接引用了。 React系列---Webpack環(huán)境搭建（一）手動搭建React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置React系列---Webpack環(huán)境...

Jason_Geng 2019-08-20 17:39 評論0 收藏0
構(gòu)建React開發(fā)環(huán)境

摘要：使用包管理工具，基于構(gòu)建工具，搭建開發(fā)環(huán)境由于一些軟件安裝跟系統(tǒng)環(huán)境相關(guān)，故這里查看本文檔，需要根據(jù)自己的系統(tǒng)環(huán)境，選擇相對應(yīng)的系統(tǒng)版本。使用Yarn包管理工具，基于Webpack構(gòu)建工具，搭建React開發(fā)環(huán)境 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 由于一些軟件安裝跟系統(tǒng)...

yck 2019-08-26 10:15 評論0 收藏0