webpack安裝配置詳解

去年寫過一篇webpack協助React js工作的簡單例子。但是webpack的功能非常強大，並不是專門服務於React js的。之前對webpack理解很模糊，只能簡單使用。最近參考其他一些文檔教程，重新學習瞭解了一下webpack的功效。

Webpack簡介

Webpack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其他的一些瀏覽器不能直接運行的擴展語言（Scss，TypeScript, React js等），並將其打包爲合適的格式以供瀏覽器使用。

在webpack中，一切資源都被看做是模塊，如js，css，圖片，json等等等等。在webpack項目中，js模塊可以引進這些模塊來使用。

官方圖：

Webpack的使用

1,安裝

webpack安裝的前提是包含NodeJS環境。下面假設機器上已經安裝了node環境。

在任何一個自己喜歡的路徑下創建新的空文件夾，作爲webpack的練習文件夾，終端進入該文件夾後執行下面命令安裝webpack

//全局安裝
npm install webpack
//安裝到項目目錄
npm install --save-dev webpack

2,創建目錄結構

終端執行下面命令創建package.json文件，裏面包含項目依賴的模塊，自定義的腳本任務等等。執行命令時將會提示填寫一些項目信息，如實填寫或者一直回車跳過就可以。

npm init

舉一個最簡單的webpack打包例子

在該文件夾下直接創建三個文件，分別爲main.js，test.js，main.html

其中test.js的代碼如下，創建一個div，設置文字爲Hello, Webpack，並用module.exports導出。

var test = document.createElement('div');
test.textContent = 'Hello, Webpack';
module.exports = test;

main.js代碼如下，將test.js中導出的div導入，然後將它放到id爲content的元素中。

var test = require('./test.js');
document.getElementById('content').appendChild(test);

之後在終端執行命令，將main.js作爲入口文件，webpack將自動識別main.js所依賴的其他文件。然後再指定一個出口文件bundle.js

webpack main.js bundle.js

命令執行完之後，發現文件目錄多出了一個bundle.js，將bundle.js引入main.html中，main.html代碼如下，包含一個id爲content的div。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="content"></div>

</body>

<script src="bundle.js"></script>

</html>

打開main.html，將會看到：

這就是webpack使用的一個最最簡單的例子。
3,Webpack的配置

每次在終端都要設置出口文件和入口文件非常麻煩。我們可以使用webpack的配置文件來設置打包的出口和入口。因爲上面的例子所有文件都在根目錄下，太過簡單，所以刪掉目錄下處package.json以外的文件，重新創建一個例子。

創建後的目錄如下，app目錄下存放入口文件，public目錄存放唯一的html文件

之後在目錄下創建名爲webpack.config.js的文件。webpack.config.js這個文件名是webpack默認的配置文件名，如果不想使用這個文件名，可以在終端執行

webpack -config [name]

打開webpack.config.js文件，填入信息

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
};

entry代表唯一的入口文件，output設置出口文件，path代表出口文件路徑，filename代表出口文件名字。

在終端執行命令，相當於之前執行的webpack [入口] [出口]，只不過這樣更加簡單，不易出錯。

webpack

終端結果：

4,Loaders

webpack項目中，一切皆模塊，而實現這個功能的關鍵，就是Loaders。

通過不同的Loader，webpack可以通過調用外部的腳本或工具對各種各樣格式的文件進行處理。

比如：將json轉化爲js，將React轉化爲js。

各種Loader都需要單獨安裝，並且需要在配置文件中進行配置。

下面是幾個Loader實例

1，JSON文件

(1)安裝轉換json的loader

npm install --save-dev json-loader

(2)配置webpack.config.js

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.json$/,
                loader: "json"
            }
        ]
    }
};

其中loader的幾個參數說明：

test：一個匹配loaders所處理的文件的擴展名的正則表達式（必須）

loader：loader的名稱（必須）

include/exclude：手動添加必須處理的文件（文件夾）或不需要處理的文件（文件夾）（可選）

query：爲loaders提供額外的設置選項（可選）

(3)在app目錄下創建json_test.js，引入根目錄的package.json

var config = require('../package.json');
console.log(config);

module.exports = function () {
    var test = document.createElement('div');
    test.textContent = JSON.stringify(config);
    return test;
};

(4)和之前一樣，在mian.js中引入引入json_test.js中的函數，並append到id爲content的元素中。

(5)編輯index.html，創建id爲content的div，在終端執行webpack，生成bundle.js，並引入到index.html中。

(6)打開index.html，結果如下：

2，CSS文件

(1)安裝css-loader和style-loader

npm install --save-dev style-loader css-loader

css-loader使你能夠使用類似@import和url(...)的方法實現require()的功能，style-loader將所有計算後的樣式加入頁面中。

(2)配置文件

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    }
};

(3)在app目錄下創建一個main.css，並寫入一些樣式

div {
    color: red;
}

(4)將css文件引入main.js，main.js文件代碼如下：

require('./main.css');

var test = require('./json_test.js');
document.getElementById('content').appendChild(test());

(5)終端執行webpack命令，再次打開index.html，結果內容變成紅色，css文件生效。

3，ReactJS

之前的博客：http://2914905399.iteye.com/blog/2314533

5,Webpack構建本地服務器

每次修改項目文件，都要在終端執行一遍webpack，非常麻煩。webpack構建本地服務器，可以使瀏覽器檢測代碼的修改，並且自動刷新修改後的結果。使用步驟：

(1)安裝依賴

npm install --save-dev webpack-dev-server

(2)配置webpack.config.js文件

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    },
    devServer: {
        contentBase: './public', //本地服務器所加載的頁面所在的目錄
        colors: true, //終端輸出結果爲彩色
        historyApiFallback: true, //不跳轉
        inline: true,  //實時刷新,
        port: 8000  //端口爲8000 默認爲8080
    }
};

(3)如果全局已經安裝了webpack-dev-server，終端直接執行webpack-dev-server

如果沒有安裝，終端執行項目目錄下安裝的webpack-dev-server

執行結果爲：

(4)瀏覽器訪問http://localhost:8000/，與之前直接打開index.html效果相同。更改main.js中的 test.textContent = JSON.stringify(config); 改爲：

test.textContent = "Hello, Webpack";

將main.css中的color:red改爲color:blue。會發現8000頁面自動刷新，刷新後效果如下：

參考地址：http://www.jianshu.com/p/42e11515c10f

英文原版地址：http://www.pro-react.com/materials/appendixA/

webpack安裝配置詳解

Webpack簡介

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

UINavigationController使用

使用UISearchBar和UITableView實現搜索功能

React js組件的生命週期

UISearchBar外觀和Delegate

UIButton用法及相關屬性

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結