webpack加載json,webpack加載器 解析markdown轉換js對象

本文目錄一覽：

• 1、webpack打包第三方類庫
• 2、Webpack基礎應用篇 – 「8」管理資源
• 3、webpack中loader 和 plugin 的主要區別
• 4、webpack安裝步驟及文件
• 5、如何用 webpack fetch 異步引用 json
• 6、webpack基本使用

webpack打包第三方類庫

技術胖webpack教程

webpack中使用echarts

在 webpack 的入口文件中直接引入第三方類庫,向外全局暴露，以 jquery 插件使用為例

1.創建本地項目 webpack-demo

2.在 webpack-demo 的根目錄下創建 package.json 文件

模塊說明：

4.修改 package.json 文件的 scripts 屬性值,進行打包資源的配置

5.安裝相關的 loader

6.安裝jquery

7.在入口文件 app.js 中引入 jquery

8.給按鈕綁定事件

9.運行命令

10.結果展示

通過 webpack 的 ProvidePlugin 插件全局引入第三方類庫,以 echats 使用為例

1 ~ 5步同上

6.安裝echarts

7.在webpack.config.js中進行配置

7.創建echart容器

8.初始化echarts

9.運行命令

10.結果展示

Webpack基礎應用篇 – 「8」管理資源

在上一章，我們講解了四種資源模塊引入外部資源。除了資源模塊，我們還可以通過loader引入其他類型的文件。

webpack 只能理解 JavaScript 和 JSON 文件，這是 webpack 開箱可用的自帶能力。 loader 讓 webpack 能夠去處理其他類型的文件，並將它們轉換為有效 模塊，以供應用程序使用，以及被添加到依賴圖中。

在 webpack 的配置中， loader 有兩個屬性：

以上配置中，對一個單獨的 module 對象定義了 rules 屬性，裡面包含兩個必須屬性： test 和 use 。這告訴 webpack 編譯器(compiler) 如下信息：

為了在 JavaScript 模塊中 import 一個 CSS 文件，你需要安裝 style-loader 和 css-loader，並在 f=””module 配置 中添加這些 loader：

修改配置文件：

模塊 loader 可以鏈式調用。鏈中的每個 loader 都將對資源進行轉換。鏈會逆序執行。第一個 loader 將其結果（被轉換後的資源）傳遞給下一個 loader，依此類推。最後，webpack 期望鏈中的最後的 loader 返回 JavaScript。

應保證 loader 的先後順序： ‘style-loader’ 在前，而 ‘css-loader’ 在後。如果不遵守此約定，webpack 可能會拋出錯誤。webpack 根據正則表達式，來確定應該查找哪些文件，並將其提供給指定的 loader。在這個示例中，所有以 .css 結尾的文件，都將被提供給 style-loader 和 css-loader 。

這使你可以在依賴於此樣式的 js 文件中 import ‘./style.css’ 。現在，在此模塊執行過程中，含有 CSS 字符串的

webpack中loader 和 plugin 的主要區別

1、loader 用於加載某些資源文件。因為 webpack 只能理解 JavaScript 和 JSON 文件，對於其他資源例如 css，圖片，或者其他的語法集，比如 jsx， coffee，是沒有辦法加載的。 這就需要對應的loader將資源轉化，加載進來。從字面意思也能看出，loader是用於加載的，它作用於一個個文件上。

2、plugin 用於擴展webpack的功能。目的在於解決loader無法實現的其他事,它直接作用於 webpack，擴展了它的功能。當然loader也是變相的擴展了 webpack ，但是它只專註於轉化文件（transform）這一個領域。而plugin的功能更加的豐富，而不僅局限於資源的加載。

webpack安裝步驟及文件

1.檢查是否有安裝npm。

在windows系統下，同時按下windows+R調出命令，輸入CMD，如下圖：

圖1

打開命令工具，輸入命令：npm -v

如下圖：

圖2

圖中顯示了5.6.0說明已經安裝了npm，顯示的5.6.0是npm的版本，如果沒有安裝的話就要先去安裝一下npm之後再繼續接下去的操作；

2.進入項目文件夾並生成package.json文件。

新建一個空文件newitem，如下圖：

圖3

然後用命令工具進入這個新項目的空文件夾，然後再輸入npm init，如下圖：

圖4

3.為項目添加webpack依賴。

在命令工具中輸入命令：npm install webpack –save-dev

如下圖：

圖5

完成以上操作之後你會發現你新建的項目文件裡面多了一些文件，如下圖：

圖6

4.新建webpack.config.js配置文件。

圖7

接着就可以通過package.json文件中的scripts來啟動不同的服務，而webpack.config.js文件是用來設置webpack相關服務內容的。

下一篇文章再具體講解如何在webpack.config.js之中進行各種配置了。

如何用 webpack fetch 異步引用 json

他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼.

他在很多地方能替代 Grunt 跟 Gulp 因為他能夠編譯打包 CSS, 做 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其他一些.

它支持 AMD 跟 CommonJS, 以及其他一些模塊系統, (Angular, ES6). 如果你不知道用什麼, 就用 CommonJS.

2. Webpack 給 Browserify 的同學用

對應地:

browserify main.js bundle.js

webpack main.js bundle.js

Webpack 比 Browserify 更強大, 你一般會用 webpack.config.js 來組織各個過程:

// webpack.config.js

module.exports = {

entry: ‘./main.js’,

output: {

filename: ‘bundle.js’

}

};

這僅僅是 JavaScript, 可以隨意添加要運行的代碼.

3. 怎樣啟動 webpack

切換到有 webpack.config.js 的目錄然後運行:

webpack 來執行一次開發的編譯

webpack -p for building once for production (minification)

webpack -p 來針對發布環境編譯(壓縮代碼)

webpack –watch 來進行開發過程持續的增量編譯(飛快地!)

webpack -d 來生成 SourceMaps

4. JavaScript 方言

Webpack 對應 Browsserify transform 和 RequireJS 插件的工具稱為 loader. 下邊是 Webpack 加載 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):

// webpack.config.js

module.exports = {

entry: ‘./main.js’,

output: {

filename: ‘bundle.js’

},

module: {

loaders: [

{ test: /\.coffee$/, loader: ‘coffee-loader’ },

{ test: /\.js$/, loader: ‘jsx-loader?harmony’ } // loaders 可以接受 querystring 格式的參數

]

}

};

要開啟後綴名的自動補全, 你需要設置 resolve.extensions 參數指明那些文件 Webpack 是要搜索的:

// webpack.config.js

module.exports = {

entry: ‘./main.js’,

output: {

filename: ‘bundle.js’

},

module: {

loaders: [

{ test: /\.coffee$/, loader: ‘coffee-loader’ },

{ test: /\.js$/, loader: ‘jsx-loader?harmony’ }

]

},

resolve: {

// 現在可以寫 require(‘file’) 代替 require(‘file.coffee’)

extensions: [”, ‘.js’, ‘.json’, ‘.coffee’]

}

};

5. 樣式表和圖片

首先更新你的代碼用 require() 加載靜態資源(就像在 Node 里使用 require()):

require(‘./bootstrap.css’);

require(‘./myapp.less’);

var img = document.createElement(‘img’);

img.src = require(‘./glyph.png’);

當你引用 CSS(或者 LESS 吧), Webpack 會將 CSS 內聯到 JavaScript 包當中, require() 會在頁面當中插入一個 ｀style標籤. 當你引入圖片, Webpack 在包當中插入對應圖片的 URL, 這個 URL 是由require()` 返回的.

你需要配置 Webpack(添加 loader):

// webpack.config.js

module.exports = {

entry: ‘./main.js’,

output: {

path: ‘./build’, // 圖片和 JS 會到這裡來

publicPath: ”, // 這個用來成成比如圖片的 URL

filename: ‘bundle.js’

},

module: {

loaders: [

{ test: /\.less$/, loader: ‘style-loader!css-loader!less-loader’ }, // 用 ! 來連接多個人 loader

{ test: /\.css$/, loader: ‘style-loader!css-loader’ },

{test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’} // 內聯 base64 URLs, 限定 =8k 的圖片, 其他的用 URL

]

}

};

6. 功能開關

有些代碼我們只想在開發環境使用(比如 log), 或者 dogfooging 的服務器裡邊(比如內部員工正在測試的功能). 在你的代碼中, 引用全局變量吧:

if (__DEV__) {

console.warn(‘Extra logging’);

}

// …

if (__PRERELEASE__) {

showSecretFeature();

}

然後配置 Webpack 當中的對應全局變量:

// webpack.config.js

// definePlugin 接收字符串插入到代碼當中, 所以你需要的話可以寫上 JS 的字符串

var definePlugin = new webpack.DefinePlugin({

__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || ‘true’)),

__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || ‘false’))

});

module.exports = {

entry: ‘./main.js’,

output: {

filename: ‘bundle.js’

},

plugins: [definePlugin]

};

然後你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 編譯. 注意一下因為 webpack -p 會執行 uglify dead-code elimination, 任何這種代碼都會被剔除, 所以你不用擔心秘密功能泄漏.

7. 多個進入點(entrypoints)

比如你用 profile 頁面跟 feed 頁面. 當用戶訪問 profile, 你不想讓他們下載 feed 頁面的代碼. 因此你創建多個包: 每個頁面一個 “main module”:

// webpack.config.js

module.exports = {

entry: {

Profile: ‘./profile.js’,

Feed: ‘./feed.js’

},

output: {

path: ‘build’,

filename: ‘[name].js’ // 模版基於上邊 entry 的 key

}

};

針對 profile, 在頁面當中插入 script src=”build/Profile.js”/script. feed 頁面也是一樣.

8. 優化共用代碼

feed 頁面跟 profile 頁面共用不要代碼(比如 React 還有通用的樣式和 component). Webpack 可以分析出來他們有多少共用模塊, 然後生成一個共享的包用於代碼的緩存.

// webpack.config.js

var webpack = require(‘webpack’);

var commonsPlugin =

new webpack.optimize.CommonsChunkPlugin(‘common.js’);

module.exports = {

entry: {

Profile: ‘./profile.js’,

Feed: ‘./feed.js’

},

output: {

path: ‘build’,

filename: ‘[name].js’

},

plugins: [commonsPlugin]

};

在上一個步驟的 script 標籤前面加上 script src=”build/common.js”/script 你就能得到廉價的緩存了.

9. 異步加載

CommonJS 是同步的, 但是 Webpack 提供了異步指定依賴的方案. 這對於客戶端的路由很有用, 你想要在每個頁面都有路由, 但你又不像在真的用到功能之前就下載某個功能的代碼.

聲明你想要異步加載的那個”分界點”. 比如:

if (window.location.pathname === ‘/feed’) {

showLoadingState();

require.ensure([], function() { // 語法奇葩, 但是有用

hideLoadingState();

require(‘./feed’).show(); // 函數調用後, 模塊保證在同步請求下可用

});

} else if (window.location.pathname === ‘/profile’) {

showLoadingState();

require.ensure([], function() {

hideLoadingState();

require(‘./profile’).show();

});

}

Webpack 會完成其餘的工作, 生成額外的 chunk 文件幫你加載好.

Webpack 在 HTML script 標籤中加載他們時會假設這些文件是怎你的根路徑下. 你可以用 output.publicPath 來配置.

// webpack.config.js

output: {

path: “/home/proj/public/assets”, // path 指向 Webpack 編譯能的資源位置

publicPath: “/assets/” // 引用你的文件時考慮使用的地址

webpack基本使用

step1: 創建一個項目錄

注意：項目名一般 不要帶中文

step2: 創建 package.json

或者：

step4: 處理第三方文件

html文件中需要引入多個js文件或者第三方模塊(例如：jquery.js)，只引入項目js入口文件( main.js ),其他js文件均在入口文件中導入。導致可能JS文件中使用了瀏覽器不識別的高級語法:

總結：webpack可以做兩件事情況：

step5: 配置入口文件和出口文件

每次修改js文件，手動輸入命令： webpack 入口文件路徑 -o 出口文件路徑 重新打包， 每次都要輸入入口文件和出口文件，麻煩。可以在項目目錄下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包：

step6: 實現自動打包編譯

每次修改js文件，都要手動重新打包，還是麻煩？使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能。

webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中必須安裝 webpack

在 package.json 文件中配置命令：

在終端中執行命令：

註：在終端執行 npm run dev ，就等於執行 webpack-dev-server 命令。這將在node中開啟一個服務器，並且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自動監聽文件改變，並且自動打包。

改變文件引用路徑：

執行上述命令後終端會有類似信息輸出：

【 Project is running at 】——webpack-dev-server工具將項目託管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通過localhost:8080/bundle.js訪問

【Content not from webpack is served from C:\Users\yfb\Desktop\前端學習案例4.27\wabpack\Demo_1\src】——不是通過webpack打包的文件，則是以src為根目錄訪問。

該項目根目錄下並不存在bundel.js文件，我們可以認為webpack-dev-server把打包好的文件，以一種虛擬的形式託管到了咱們項目的根目錄中，雖然我們看不到它，但是可以認為和 dist、src、node_modules平級，有一個看不見的文件，叫做 bundle.js。其實是為了頻繁打包，提高效率，直接把打包的文件放在內存中。

因為項目託管到新服務器，現在應該訪問的是 該服務器 下的項目，文件引用路徑也要改變:

step7: 自動打開瀏覽器進行訪問、配置端口號、指定託管的根目錄、熱重載（只是修改補丁，不重新生成整個bundle.js文件）

在 package.json 中配置命令，並重啟服務器：

step8: 使用 html-webpack-plugin 插件

使用 –contentBase 指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標籤的src屬性。

安裝 html-webpack-plugin 插件：

在 webpack.config.js 配置文件中配置插件：

html-webpack-plugin 插件的兩個作用：

step9: 處理樣式文件

html文件中需要引入css、less、sass樣式文件。默認情況下，webpack處理不了這些樣式文件。

處理css文件：

處理less樣式文件