配置webpack+react環境

894974231 發布于2019-08-20 15:59 / 2618人閱讀

摘要：假設環境已經裝好當前目錄創建文件然后當前目錄執行安裝成功后在當前目錄執行創建并編輯文件表示要編譯的文件的類型，這里要編譯的是文件裝載的哪些模塊標示不編譯文件夾下面的內容具體的編譯的類型，表示不壓縮我們需要編譯的是和

假設node環境已經裝好

當前目錄創建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"
  }
}

然后當前目錄執行：

npm install

安裝成功后在當前目錄執行創建并編輯文件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/,//標示不編譯node_modules文件夾下面的內容
        query: {//具體的編譯的類型，
            compact: true,//表示不壓縮
            presets: ["es2015", "react"]//我們需要編譯的是es6和react
        }
      }
    ]
  }
}

創建編輯入口文件entry.js:

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

創建編輯index.html:

執行命令webpack
成功！

GPU云服務器云服務器 webpack cdn配置 webpack配置cdn webpack常用配置項環境配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82639.html

React系列---Webpack環境搭建（二）不同環境不同配置

摘要：系列環境搭建一手動搭建系列環境搭建二不同環境不同配置系列環境搭建三打包性能優化實際項目中，往往不同環境有不同的構建需求。 React系列---Webpack環境搭建（一）手動搭建React系列---Webpack環境搭建（二）不同環境不同配置React系列---Webpack環境搭建（三）打包性能優化實際項目中，往往不同環境有不同的構建需求。比如開發、測試和生產環境對應的后端接口地...

coordinate35 2019-08-20 17:35 評論0 收藏0
React項目實戰：環境搭建

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

cnio 2019-08-21 17:47 評論0 收藏0
React項目實戰：環境搭建

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

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

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

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

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

Jason_Geng 2019-08-20 17:39 評論0 收藏0
構建React開發環境

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

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