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

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

摘要：假設(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文件：

{
  "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í)行：

npm install

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

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:

import React from "react";
import { render } from "react-dom";
var myDivElement = ;
render(myDivElement, document.getElementById("mountNode"));

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

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

GPU云服務(wù)器云服務(wù)器 webpack cdn配置 webpack配置cdn webpack常用配置項(xiàng) 環(huán)境配置

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

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

相關(guān)文章

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

摘要：系列環(huán)境搭建一手動(dòng)搭建系列環(huán)境搭建二不同環(huán)境不同配置系列環(huán)境搭建三打包性能優(yōu)化實(shí)際項(xiàng)目中，往往不同環(huán)境有不同的構(gòu)建需求。 React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建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)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(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)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(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)中劃線下劃線。另外再增加，這樣刷新的速度會(huì)大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容本文也同步發(fā)表在我的公眾號(hào)“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個(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)境搭建（一）手動(dòng)搭建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