webpack的入門教程

weixin_34253539發表於2017-10-31
Web

文章內容由蚊子的前端部落格進行釋出，或許你想看看他其他的文章呢： http://www.xiabingbao.com

原文地址： https://www.xiabingbao.com/post/webpack/webpack-started-tutorial.html

webpack在官方網站中是這麼定義的。webpack是一個現代 JavaScript 應用程式的模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成少量的 bundle - 通常只有一個，由瀏覽器載入。

在webpack中，一切皆資源，CSS，JS，圖片等都可以作為資源處理。webpack在配置大型專案時，可能會很大很複雜的配置，這裡我們就從簡單的2-3個頁面的配置開始說起。

1. 簡單的配置

如果之前用過gulp處理過前端資源，那麼使用webpack就相對來說比較簡單一些。要使用webpack的話，首先要在專案目錄中安裝webpack，其他的我們稍後再安裝:

npm install webpack --save-dev

webpack的配置要在根目錄的webpack.config.js裡，我們先來看下簡單基本的配置：

var webpack = require('webpack');

module.exports = {
    // 入口檔案，可寫多個
    entry : {
        entry : './src/entry.js'
    },

    // 輸出出口
    output : {
        path : __dirname+'/out/', // 輸出目錄
        filename : '[name].js' // 輸出的檔名稱規則， [name]表示上面entry中的key值（main）
    },

    module : {
        // loader操作各種資源
        loaders : [
            {
                test : /\.css$/, // 匹配到.css檔案
                // 用css-loader與style-loader處理匹配到的檔案，從右向左執行
                loader : 'style-loader!css-loader' 
            }
        ]
    }
}

用上面的配置的話，還需要安裝css-loader和style-loader:

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

安裝後，我們再配置一個簡單的目錄：


`-out
`-src
  `---css
  `---img
  `---js
  `-entry.js
`-package.json
`-webpack.config.js
`-index.html

好了，我們編寫css和js了。

在css目錄中，我們建立一個index.css:

.main{
    background: #ccc;
    width: 400px;
    height: 400px;
}

在js目錄中，我們建立一個index.js：

function getTime(){
    console.log( Date.now() );
}

exports.getTime = getTime;

在 entry.js 中：

require("./css/index.css");

import o from './js/index.js';

console.log( o.getTime() );

執行命令：

webpack -p

在index.html中引入./out/entry.js:

<div class="main"></div>
<script type="text/javascript" src="./out/entry.js"></script>

開啟index.html就能看到效果了。

2. webpack講解

在webpack.config.js中：

entry可以有多個入口，來對應多個頁面，比如我還有一個分享頁面：

entry : {
    entry : './src/entry.js',
    share : './src/share.js'
}

在新頁面中，引入./out/share.js即可。

loader是從右往左開始執行的，先執行css-loader，再執行style-loader。 css-loader用來解析css; style-loader是將css樣式用style標籤插入頁面的head裡。而且在引入loader時，可以直接省略-loader：

module : {
    loaders : [
        {
            test : /\.css$/,
            loader : 'style!css'
        }
    ]
}

在滿足基本的配置後，我們需要滿足更多的需求，比如我要用SASS編寫css，我要用ES6寫js，處理CSS中的圖片等等。那麼我們就得對webpack.config.js擴充配置：

npm install sass-loader url-loader file-loader babel-loader --save-dev

配置檔案webpack.config.js：

output : {
    path : __dirname+'/out/', // 輸出目錄
    filename : '[name].js',
    publicPath : __dirname+'/out/' // 圖片路徑
}
module : {
    loaders : [
        {
            test : /\.css$/,
            loader : 'style!css'
        },
        {
            test: /\.(jpg|png)$/, 
            loader: "url?limit=8192"
        },
        {
            test: /\.scss$/, 
            loader: "style!css!sass"
        },
        {
            test: /\.js$/, 
            loader: "babel"
        }
    ]
}

好了，現在可以使用sass, es6了！

2.1 使用ES6

在./js/index.js中：

// ./src/js/index.js

class Student{
    constructor(name=''){
        this.name = name;
    }
    sayHello(){
        console.log( `hello, ${this.name}!` );
    }
}

var wenzi = new Student('wenzi');
wenzi.sayHello();

2.2 獨立的CSS檔案

目前頁面中的樣式，是從js里載入的。如果我們想要把css獨立到一個單獨的檔案中，就需要一個extract-text-webpack-plugin外掛了:

npm install extract-text-webpack-plugin --save-dev

webpack.config.js中：

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");


plugins : [
    new webpack.BannerPlugin('created at '+(new Date()).toLocaleString()),
    new ExtractTextPlugin("[name].css")
]

name就是entry中的key值。

3. 命令列

剛才上面我們用的webpack -p來編譯的，這裡還有幾個命令也可以使用：

// webpack 命令列的幾種基本命令

$ webpack --config XXX.js  // 使用另一份配置檔案（比如webpack.config2.js）來打包
$ webpack -w // 提供watch方法，實時進行打包更新
$ webpack -p // 對打包後的檔案進行壓縮，提供production
$ webpack -d // 提供source map，方便除錯。

使用webpack --watch可以監控檔案變化，實時編譯；在要釋出到線上時，使用webpack -p編譯為壓縮版本的檔案。

4. 總結

關於webpack的內容依然還有很多，這裡我們僅僅是做了一些入門的講解。更多的內容可以檢視官網 https://doc.webpack-china.org... 。後續我們也會講解webpack的高階應用等

文章內容由蚊子的前端部落格進行釋出，或許你想看看他其他的文章呢： http://www.xiabingbao.com

原文地址： https://www.xiabingbao.com/po...

相關文章