學習筆記：webpack

時間 2019-11-20

標籤學習筆記 webpack 简体版

原文原文鏈接

http://wiki.jikexueyuan.com/project/webpack-handbook/　　Webpack 中文指南css

http://www.itzjt.cc/2017/04/09/webpack/　　webpack構建工具（參考）2017-11-27html

http://blog.csdn.net/chenqiuge1984/article/details/53009352　　webpack PK fisnode

https://www.webpackjs.com/concepts/　　webpack中文文檔　　2019-7-26react

https://www.cnblogs.com/star-wind/p/11254972.html　　2019-7-27webpack

$ cnpm install webpack -g
# 此時 Webpack 已經安裝到了全局環境下，能夠經過命令行 webpack -h 試試。
$ webpack -h

# 進入項目目錄
# 肯定已經有 package.json，沒有就經過 npm init 建立
# 安裝 webpack 依賴
$ cnpm install webpack --save-dev

# 查看 webpack 版本信息
$ cnpm info webpack

# 安裝指定版本的 webpack
$ cnpm install webpack@1.12.x --save-dev

# 若是須要使用 Webpack 開發工具，要單獨安裝：
$ cnpm install webpack-dev-server --save-dev

cnpm install -g css-loader style-loader　　安裝loadergit

http://wiki.jikexueyuan.com/project/webpack-handbook/usage.htmlgithub

初步示例：　　（webpack之產出js、css文件，不產出index.html文件。須要另外安裝插件： HtmlWebpackPlugin）web

建立一個靜態頁面 index.html 和一個 JS 入口文件 entry.jsexpress

index.htmlnpm

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

entry.js

document.write('It works.')

而後編譯 entry.js 並打包到 bundle.js：

$ webpack entry.js bundle.js

用瀏覽器打開 index.html 將會看到 It works. 。

第二步示例：

接下來添加一個模塊 module.js 並修改入口 entry.js：

module.js

module.exports = 'It works from module.js.'

entry.js

document.write('It works.')
document.write(require('./module.js')) // 添加模塊

從新打包 webpack entry.js bundle.js 後刷新頁面看到變化 It works.It works from module.js.

Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 bundle.js 。

Webpack 會給每一個模塊分配一個惟一的 id 並經過這個 id 索引和訪問模塊。在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。

Loader

Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。

npm install css-loader style-loader    #安裝 loader

若是每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。咱們能夠根據模塊類型（擴展名）來自動綁定須要的 loader。將 entry.js 中的 require("!style!css!./style.css") 恢復爲 require("./style.css")

$ webpack entry.js bundle.js --module-bind 'css=style!css'

配置文件：

Webpack 在執行的時候，除了在命令行傳入參數，還能夠經過指定的配置文件來執行。默認狀況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者經過 --config 選項來指定配置文件。

http://wiki.jikexueyuan.com/project/webpack-handbook/configuration.html

package.json　　在根目錄建立 package.json 來添加 webpack 須要的依賴　　（例： https://github.com/owenliang/react-webpack2/blob/master/package.json）
運行 npm install
webpack.config.js　　而後建立一個配置文件 webpack.config.js　　（例：https://github.com/owenliang/react-webpack2/blob/master/webpack.config.js）
webpack 經過配置文件執行的結果和上一章節經過命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 執行的結果是同樣的

插件：

插件能夠完成更多 loader 不能完成的功能。
插件的使用通常是在 webpack 的配置信息 plugins 選項中指定。
Webpack 自己內置了一些經常使用的插件，還能夠經過 npm 安裝第三方插件。

修改 webpack.config.js，添加 plugins：

var webpack = require('webpack')
module.exports = {
    entry: './entry.js',     //入口文件
    output: {       //輸出
        path: __dirname,
        filename: 'bundle.js'
    },
        module: {
            loaders: [      //loader
            {test: /\.css$/, loader: 'style!css'}
            ]
        },
    plugins: [    //插件
        new webpack.BannerPlugin('This file is created by zhaoda')
    ]
}

開發環境：

# webpack 的編譯的輸出內容帶有進度和顏色。
$ webpack --progress --colors

# 編譯改成監聽模式
$ webpack --progress --colors --watch

使用 webpack-dev-server 開發服務是一個更好的選擇。它將在 localhost:8080 啓動一個 express 靜態資源 web 服務器，而且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。

# 安裝
$ npm install webpack-dev-server -g

# 運行
$ webpack-dev-server --progress --colors

故障處理：

# 打印錯誤詳情
$ webpack --display-error-details

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。