npm + webpack +react

時間  2019-11-18
標籤 npm webpack react 欄目 React 简体版
原文   原文鏈接

踏上征途

在開始以前，你須要把你的 Node.js 和 NPM 都更新到最新的版本。訪問 nodejs.org 查看安裝詳情。咱們將會使用 NPM 安裝一些工具。javascript

開始使用 Webpack 很是簡單，我會展現給你看使用它的一個簡單的項目。第一步，爲你的項目新建一個文件夾，而後輸入 npm init，而後填寫相關問題。這樣會爲你建立了 package.json，不用擔憂填錯，你能夠以後修改它。html

安裝 Webpack

接下來咱們安裝 Webpack，咱們要把它安裝在本地，而後把它做爲項目依賴保存下來。這樣你能夠在任何地方編譯（服務端編譯之類的）。輸入 npm i wepack --save-dev。若是你想運行它，就輸入 node_modules/.bin/webpack。java

目錄結構

項目的目錄結構長這樣：node

  • /app

    • main.js
    • component.js
  • /build

    • bundle.js (自動建立)
    • index.html
  • package.json
  • webpack.config.js

咱們會使用 Webpack 在咱們的 /app 裏來自動建立 bundle.js 。接下來，咱們來設置 webpack.config.js。webpack

設置 Webpack

Webpack 的配置文件長這樣：web

webpack.config.jsnpm

var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'app/main.js'), output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', }, };

運行你的第一個編譯

如今咱們有了一個最簡單的配置，咱們須要有什麼東西去編譯，讓咱們開始一個經典的 Hello World，設置 /app 像這樣：json

app/component.jsgulp

'use strict'; module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello world'; return element; };

app/main.js瀏覽器

'use strict'; var component = require('./component.js'); document.body.appendChild(component());

如今在你的命令行運行 webpack，而後你的應用會開始編譯，一個 bundle.js 文件就這樣出如今你的 /build 文件夾下，須要在build/ 下的 index.html 去啓動項目。

build/index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <script src="bundle.js"></script> </body> </html>

這個文件能夠用 html-webpack-plugin 來生成。若是你以爲冒險，那就把剩下的工具交給它來作。使用它就只有一個配置的問題。通常來講使用 Webpack 來工做就是這麼個套路。

運行應用

只要雙擊 index.html 或者設置一個 Web 服務指向 build/ 文件夾。

設置 package.json scripts

npm 是一個很是好用的用來編譯的指令，經過 npm 你能夠不用去擔憂項目中使用了什麼技術，你只要調用這個指令就能夠了，只要你在 package.json 中設置 scripts 的值就能夠了。

在這個案例中咱們把編譯步驟放到 npm run build 中是這樣：

  1. npm i webpack --save - 若是你想要把 Webpack 做爲一個項目的開發依賴，就能夠使用 --save-dev，這樣就很是方便地讓你在開發一個庫的時候，不會依賴工具（但不是個好方法！）。
  2. 把下面的內容添加到 package.json中。
"scripts": { "build": "webpack" }

如今你能夠輸入 npm run build 就能夠編譯了。

當項目愈加複雜的時候，這樣的方法會變得愈來愈有效。你能夠把全部複雜的操做隱藏在 scripts 裏面來保證界面的簡潔。

不過潛在的問題是這種方法會致使若是你使用一些特殊的指令的時候只能在 Unix 環境中使用。因此若是你須要考慮一些未知的環境中的話，那麼 gulp-webpack 會是一個好的解決方案。

注意 NPM 會找到 Webpack，npm run 會把他臨時加到 PATH來讓咱們這個神奇的命令工做。

工做流

若是須要一直輸入 npm run build 確實是一件很是無聊的事情，幸運的是，咱們能夠把讓他安靜的運行，讓咱們設置 webpack-dev-server。

設置 webpack-dev-server

第一步，輸入 npm i webpack-dev-server --save，此外，咱們須要去調整 package.json scripts 部分去包含這個指令，下面是基本的設置：

package.json

{
  "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" } }

當你在命令行裏運行 npm run dev 的時候他會執行 dev 屬性裏的值。這是這些指令的意思：

  1. webpack-dev-server - 在 localhost:8080 創建一個 Web 服務器
  2. --devtool eval - 爲你的代碼建立源地址。當有任何報錯的時候可讓你更加精確地定位到文件和行號
  3. --progress - 顯示合併代碼進度
  4. --colors - Yay，命令行中顯示顏色！
  5. --content-base build - 指向設置的輸出目錄

總的來講，當你運行 npm run dev 的時候，會啓動一個 Web 服務器，而後監聽文件修改，而後自動從新合併你的代碼。真的很是簡潔！

訪問 http://localhost:8080 你會看到效果。

瀏覽器自動刷新

當運行 webpack-dev-server 的時候，它會監聽你的文件修改。當項目從新合併以後，會通知瀏覽器刷新。爲了可以觸發這樣的行爲，你須要把你的 index.html 放到 build/ 文件夾下，而後作這樣的修改：

build/index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="bundle.js"></script> </body> </html>

咱們須要增長一個腳本當發生改動的時候去自動刷新應用，你須要在配置中增長一個入口點。

var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')], output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', }, };

就是這樣！如今你的應用就能夠在文件修改以後自動刷新了。

默認環境

在上面的例子中咱們建立了 index.html 文件來獲取更多的自由和控制。一樣也能夠從 http://localhost:8080/webpack-dev-server/bundle 運行應用。這會觸發一個默認的你不能控制的 index.html ，它一樣會觸發一個容許iFrame中顯示重合並的過程。

引入文件

模塊

Webpack 容許你使用不一樣的模塊類型，可是 「底層」必須使用同一種實現。全部的模塊能夠直接在盒外運行。

ES6 模塊

import MyModule from './MyModule.js';

CommonJS

var MyModule = require('./MyModule.js');

AMD

define(['./MyModule.js'], function (MyModule) { });

理解文件路徑

一個模塊須要用它的文件路徑來加載，看一下下面的這個結構：

  • /app

    • /modules
    • MyModule.js
    • main.js (entry point)
    • utils.js

      踏上征途

      在開始以前，你須要把你的 Node.js 和 NPM 都更新到最新的版本。訪問 nodejs.org 查看安裝詳情。咱們將會使用 NPM 安裝一些工具。

      開始使用 Webpack 很是簡單，我會展現給你看使用它的一個簡單的項目。第一步，爲你的項目新建一個文件夾，而後輸入 npm init，而後填寫相關問題。這樣會爲你建立了 package.json，不用擔憂填錯，你能夠以後修改它。

      安裝 Webpack

      接下來咱們安裝 Webpack，咱們要把它安裝在本地，而後把它做爲項目依賴保存下來。這樣你能夠在任何地方編譯（服務端編譯之類的）。輸入 npm i wepack --save-dev。若是你想運行它，就輸入 node_modules/.bin/webpack。

      目錄結構

      項目的目錄結構長這樣：

      • /app

        • main.js
        • component.js
      • /build

        • bundle.js (自動建立)
        • index.html
      • package.json
      • webpack.config.js

      咱們會使用 Webpack 在咱們的 /app 裏來自動建立 bundle.js 。接下來，咱們來設置 webpack.config.js。

      設置 Webpack

      Webpack 的配置文件長這樣：

      webpack.config.js

      var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'app/main.js'), output: { path: path.resolve(__dirname, '/build'), filename: 'bundle.js', }, };

      運行你的第一個編譯

      如今咱們有了一個最簡單的配置，咱們須要有什麼東西去編譯，讓咱們開始一個經典的 Hello World，設置 /app 像這樣：

      app/component.js

      'use strict'; module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello world'; return element; };

      app/main.js

      'use strict'; var component = require('./component.js'); document.body.appendChild(component());

      如今在你的命令行運行 webpack，而後你的應用會開始編譯，一個 bundle.js 文件就這樣出如今你的 /build 文件夾下，須要在build/ 下的 index.html 去啓動項目。

      build/index.html

      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <script src="bundle.js"></script> </body> </html>

      這個文件能夠用 html-webpack-plugin 來生成。若是你以爲冒險，那就把剩下的工具交給它來作。使用它就只有一個配置的問題。通常來講使用 Webpack 來工做就是這麼個套路。

      運行應用

      只要雙擊 index.html 或者設置一個 Web 服務指向 build/ 文件夾。

      設置 package.json scripts

      npm 是一個很是好用的用來編譯的指令，經過 npm 你能夠不用去擔憂項目中使用了什麼技術，你只要調用這個指令就能夠了，只要你在 package.json 中設置 scripts 的值就能夠了。

      在這個案例中咱們把編譯步驟放到 npm run build 中是這樣：

      1. npm i webpack --save - 若是你想要把 Webpack 做爲一個項目的開發依賴，就能夠使用 --save-dev，這樣就很是方便地讓你在開發一個庫的時候，不會依賴工具（但不是個好方法！）。
      2. 把下面的內容添加到 package.json中。
      "scripts": { "build": "webpack" }

      如今你能夠輸入 npm run build 就能夠編譯了。

      當項目愈加複雜的時候，這樣的方法會變得愈來愈有效。你能夠把全部複雜的操做隱藏在 scripts 裏面來保證界面的簡潔。

      不過潛在的問題是這種方法會致使若是你使用一些特殊的指令的時候只能在 Unix 環境中使用。因此若是你須要考慮一些未知的環境中的話，那麼 gulp-webpack 會是一個好的解決方案。

      注意 NPM 會找到 Webpack，npm run 會把他臨時加到 PATH來讓咱們這個神奇的命令工做。

      工做流

      若是須要一直輸入 npm run build 確實是一件很是無聊的事情，幸運的是，咱們能夠把讓他安靜的運行，讓咱們設置 webpack-dev-server。

      設置 webpack-dev-server

      第一步，輸入 npm i webpack-dev-server --save，此外，咱們須要去調整 package.json scripts 部分去包含這個指令，下面是基本的設置：

      package.json

      {
  "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" } }

      當你在命令行裏運行 npm run dev 的時候他會執行 dev 屬性裏的值。這是這些指令的意思：

      1. webpack-dev-server - 在 localhost:8080 創建一個 Web 服務器
      2. --devtool eval - 爲你的代碼建立源地址。當有任何報錯的時候可讓你更加精確地定位到文件和行號
      3. --progress - 顯示合併代碼進度
      4. --colors - Yay，命令行中顯示顏色！
      5. --content-base build - 指向設置的輸出目錄

      總的來講，當你運行 npm run dev 的時候，會啓動一個 Web 服務器，而後監聽文件修改，而後自動從新合併你的代碼。真的很是簡潔！

      訪問 http://localhost:8080 你會看到效果。

      瀏覽器自動刷新

      當運行 webpack-dev-server 的時候，它會監聽你的文件修改。當項目從新合併以後，會通知瀏覽器刷新。爲了可以觸發這樣的行爲，你須要把你的 index.html 放到 build/ 文件夾下，而後作這樣的修改：

      build/index.html

      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="bundle.js"></script> </body> </html>

      咱們須要增長一個腳本當發生改動的時候去自動刷新應用，你須要在配置中增長一個入口點。

      var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')], output: { path: path.resolve(__dirname, '/build'), filename: 'bundle.js', }, };

      就是這樣！如今你的應用就能夠在文件修改以後自動刷新了。

      默認環境

      在上面的例子中咱們建立了 index.html 文件來獲取更多的自由和控制。一樣也能夠從 http://localhost:8080/webpack-dev-server/bundle 運行應用。這會觸發一個默認的你不能控制的 index.html ，它一樣會觸發一個容許iFrame中顯示重合並的過程。

      引入文件

      模塊

      Webpack 容許你使用不一樣的模塊類型，可是 「底層」必須使用同一種實現。全部的模塊能夠直接在盒外運行。

      ES6 模塊

      import MyModule from './MyModule.js';

      CommonJS

      var MyModule = require('./MyModule.js');

      AMD

      define(['./MyModule.js'], function (MyModule) { });

      理解文件路徑

      一個模塊須要用它的文件路徑來加載，看一下下面的這個結構：

      • /app

        • /modules
        • MyModule.js
        • main.js (entry point)
        • utils.js

      打開 main.js 而後能夠經過下面兩種方式引入 app/modules/MyModule.js

      app/main.js

      // ES6 import MyModule from './modules/MyModule.js'; // CommonJS var MyModule = require('./modules/MyModule.js');

      最開始的 ./ 是 「相對當前文件路徑」

      讓咱們打開 MyModule.js 而後引入 app/utils：

      app/modules/MyModule.js

      // ES6 相對路徑 import utils from './../utils.js'; // ES6 絕對路徑 import utils from '/utils.js'; // CommonJS 相對路徑 var utils = require('./../utils.js'); // CommonJS 絕對路徑 var utils = require('/utils.js');

      相對路徑是相對當前目錄。絕對路徑是相對入口文件，這個案例中是 main.js。

打開 main.js 而後能夠經過下面兩種方式引入 app/modules/MyModule.js

app/main.js

// ES6 import MyModule from './modules/MyModule.js'; // CommonJS var MyModule = require('./modules/MyModule.js');

最開始的 ./ 是 「相對當前文件路徑」

讓咱們打開 MyModule.js 而後引入 app/utils：

app/modules/MyModule.js

// ES6 相對路徑 import utils from './../utils.js'; // ES6 絕對路徑 import utils from '/utils.js'; // CommonJS 相對路徑 var utils = require('./../utils.js'); // CommonJS 絕對路徑 var utils = require('/utils.js');

相對路徑是相對當前目錄。絕對路徑是相對入口文件，這個案例中是 main.js。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程