npm + webpack +react

本文轉載自查看原文 2016-07-05 11:47 1608

踏上征途

在開始之前，你需要把你的 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 中是這樣：

npm i webpack --save - 如果你想要把 Webpack 作為一個項目的開發依賴，就可以使用 --save-dev，這樣就非常方便地讓你在開發一個庫的時候，不會依賴工具（但不是個好方法！）。
把下面的內容添加到 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 屬性里的值。這是這些指令的意思：

webpack-dev-server - 在 localhost:8080 建立一個 Web 服務器
--devtool eval - 為你的代碼創建源地址。當有任何報錯的時候可以讓你更加精確地定位到文件和行號
--progress - 顯示合並代碼進度
--colors - Yay，命令行中顯示顏色！
--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。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 npm+webpack+babel+react安裝關於react-native環境你需要了解的node/npm/webpack npm scripts + webpack 實踐經驗（React、Nodejs） npm和webpack npm & webpack webpack一、安裝webpack及為什么要npm init 解決create-react-app 后 npm start 中出現的webpack版本問題和webpack-dev-server的版本問題快速搭建yeoman+webpack+react項目和npm start啟動命令失敗問題 webpack nodejs npm關系通過npm安裝webpack

npm + webpack +react

踏上征途

安裝 Webpack

目錄結構

設置 Webpack

運行你的第一個編譯

運行應用

設置 package.json scripts

工作流

設置 webpack-dev-server

瀏覽器自動刷新

默認環境

引入文件

模塊

ES6 模塊

CommonJS

AMD

理解文件路徑

踏上征途

安裝 Webpack

目錄結構

設置 Webpack

運行你的第一個編譯

運行應用

設置 package.json scripts

工作流

設置 webpack-dev-server

瀏覽器自動刷新

默認環境

引入文件

模塊

ES6 模塊

CommonJS

AMD

理解文件路徑

免責聲明！

設置 `package.json` scripts

設置 `webpack-dev-server`

設置 `package.json` scripts

設置 `webpack-dev-server`