webpack的安裝和使用

時間 2019-11-18

標籤 webpack 安裝使用简体版

原文原文鏈接

Webpack是什麼

首先能夠看下官方文檔，文檔是最好的老師。php

Webpack是由Tobias Koppers開發的一個開源前端模塊構建工具。它的基本功能是將以模塊格式書寫的多個JavaScript文件打包成一個文件，同時支持CommonJS和AMD格式。但讓它不同凡響的是，它提供了強大的loader API來定義對不一樣文件格式的預處理邏輯，從而讓咱們能夠將CSS、模板，甚至是自定義的文件格式當作JavaScript模塊來使用。Webpack 基於loader還能夠實現大量高級功能，好比自動分塊打包並按需加載、對圖片資源引用的自動定位、根據圖片大小決定是否用base64內聯、開發時的模塊熱替換等等，能夠說是目前前端構建領域最有競爭力的解決方案之一。css

爲何使用Webpack

他相似browserify 可是能夠把你的應用分離成許多文件，若是你有許多頁面在你的單頁應用裏面，用戶只須要下載當前頁面所須要的代碼。若是你跳轉到另外一個頁面，他們不須要從新加載通用的代碼。
他能替代grunt或者gulp大部分的功能由於他能夠構建和打包CSS，預處理CSS，編譯JS和打包處理圖片，甚至更多事情。
他支持AMD和CommonJs以及其餘的模塊化系統（Angular，ES6）。若是你不知道用什麼，那麼能夠用CommonJs。

怎麼安裝Webpack

安裝node.js

首先須要安裝 Node.js ，node自帶了包管理工具 npm 。html

可是因爲npm在國內下載的時候是很慢的，因此這裏推薦一個替代npm的淘寶鏡像cnpm.以後npm安裝請使用cnpm！前端

命令行安裝：java

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝webpack

使用 npm install webpack -g ，webpack全局安裝到了本地環境中，就可使用 webpack 命令了。node

在項目中使用webpack

經過 npm init 實例化package.json文件。
經過 npm install webpack --save-dev 安裝 webpack 到 package.json 文件中。
或者經過 npm install webpack@1.2.x --save-dev 安裝指定版本的 webpack 到 package.json 文件中。
經過 npm install webpack-dev-server --save-dev 安裝 dev tools 到 package.json 文件中，本地運行webpack服務。

怎麼使用Webpack

一、安裝 webpack 後，可使用 webpack 這個命令行工具。主要命令： webpack <entry> <output> 。能夠切換到包含webpack.config.js的目錄運行命令：webpack

webpack 執行一次開發時的編譯
webpack -p 執行一次生成環境的編譯（壓縮）
webpack --watch 在開發時持續監控增量編譯（很快）
webpack -d 讓他生成SourceMaps
webpack --progress 顯示編譯進度
webpack --colors 顯示靜態資源的顏色
webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by 將modules/chunks/assets進行列表排序
webpack --display-chunks 展現編譯後的分塊
webpack --display-reasons 顯示更多引用模塊緣由
webapck --display-error-details 顯示更多報錯信息

二、每一個項目下都必須配置有一個 webpack.config.js ，它的做用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它須要作什麼。git

下面看一個簡單的示例：github

var webpack = require('webpack');

module.exports = {
    //插件項
    plugins: [
        //提公用js到common.js文件中
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        //將樣式統一發布到style.css中
        new ExtractTextPlugin("style.css", {
            allChunks: true,
            disable: false
        }),
        //使用ProvidePlugin加載使用頻率高的模塊
        new webpack.ProvidePlugin({
            $: "webpack-zepto"
        })
    ],
    //頁面入口文件配置
    entry: {
        index : './src/main.js'
    },
    //入口文件輸出配置
    output: {
        path: __dirname +'/dist/',
        filename: '[name].js'
    },
    module: {
        //加載器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解決方案配置
    resolve: {
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            filter: path.join(__dirname, 'src/filters')
        }
    }
};

entry

entry 是頁面入口文件配置，能夠是一個文件或者多個入口文件，能夠是對象格式或者數組格式。web

entry: {
    index : './src/main.js'
} 
entry:['./src/main.js','./src/index.js']

output

output 是對應輸出項配置,主要包括 path , filename 和 publishPath 屬性。 path 表明輸出的路徑， filename 表明輸出的文件名稱， publishPath 表明靜態資源發佈後的前綴地址。

module.loaders

module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都須要使用什麼加載器來處理。點擊這裏能夠查看loader list 。

module: {
    //加載器配置
    loaders: [
        //.css 文件使用 style-loader 和 css-loader 來處理
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
        { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
        //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
}

loader主要有3種使用方式：

一、在頁面裏面引用資源使用

require("url-loader?mimetype=image/png!./file.png");

二、在webpack.config.js文件夾中使用
{ test: /.png$/, loader: "url?mimetype=image/png" };

三、在命令行中編譯使用
webpack --module-bind "png=url-loader?mimetype=image/png";

如上，"-loader"實際上是能夠省略不寫的，多個loader之間用「!」鏈接起來。

注意全部的加載器都須要經過 npm 來加載，並建議查閱它們對應的 readme 來看看如何使用。

拿最後一個 url-loader 來講，它會將樣式中引用到的圖片轉爲模塊來處理，使用該加載器須要先進行安裝：

npm install url-loader -save-dev

配置信息的參數「?limit=8192」表示將全部小於8kb的圖片都轉爲base64形式（其實應該說超過8kb的才使用 url-loader 來映射到文件，不然轉爲data url形式）。也可使用file-loader來加載資源文件。

plugins

plugins 是插件項，這裏咱們使用了一個 CommonsChunkPlugin 的插件，它用於提取多個入口文件的公共腳本部分，而後生成一個 common.js 來方便多頁面之間進行復用。點擊這裏能夠查看plugins list 。

plugins: [
    //提公用js到common.js文件中
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    //將樣式統一發布到style.css中
    new ExtractTextPlugin("style.css", {
        allChunks: true,
        disable: false
    }),
    //使用ProvidePlugin加載使用頻率高的模塊
    new webpack.ProvidePlugin({
        $: "webpack-zepto"
    })
]

如上，包含兩種：

一、第一種webpack自帶的一些插件： webpack.ProvidePlugin 、 webpack.optimize.CommonsChunkPlugin ，

二、另一種則經過 npm 包安裝的： ExtractTextPlugin 。

resolve

最後是 resolve 配置，這塊很好理解，直接寫註釋了：

resolve: {
    // require時省略的擴展名，如：require('module') 不須要module.js
    extension: ['', '.js'],
    //別名
    alias: {
        filter: path.join(__dirname, 'src/filters')
    }
}

使用Webpack-dev-server

webpack-dev-server 是基於node.js Express服務，它同時包含了一個基於 Socket.IO 輕量的運行時環境。

'use strict'
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
// 配置代碼自動編譯和熱替換插件
config.entry.unshift('webpack-dev-server/client?http://localhost:9090', "webpack/hot/dev-server");
config.plugins.push(new webpack.HotModuleReplacementPlugin());
// 這裏配置：請求http://localhost:9090/index.php，
// 至關於經過本地node服務代理請求到了http://testapi.uhouzz.com/index.php
var proxy = [{
    path: "/index.php/*",
    target: "http://pc.uhouzz.com",
    host: "pc.uhouzz.com"
}]
//啓動服務
var app = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot:true,
    historyApiFallback: true,
    proxy:proxy
});
app.listen(9090);

如上，引用 webpack 和 webpack-dev-server 模塊，經過WebpackDevServer啓動服務，經過 HotModuleReplacementPlugin 插件啓動代碼自動編譯頁面自動刷新。這樣，當你修改了html、js或者樣式文件，頁面會自動編譯刷新。

html頁面使用

直接在頁面引入 webpack 最終生成的頁面腳本和樣式文件便可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack test</title>
    <link rel="stylesheet" href="/dist/style.css">
</head>

<body>
    <div id="app"></div>
    <script src="/dist/common.js"></script>
    <script src="/dist/build.js"></script>
</body>
</html>