摘要：上篇文章中簡單介紹了的最基本用法，且項(xiàng)目結(jié)構(gòu)十分簡單，只有一個(gè)頁面一個(gè)頁面兩個(gè)文件。本文將介紹如何使用對具有較為規(guī)范的結(jié)構(gòu)的項(xiàng)目進(jìn)行構(gòu)建。這說明監(jiān)測到了文件的變化，但是我們的加載的文件并沒有變。后續(xù)還會(huì)更深入地學(xué)習(xí)，希望和大家一同進(jìn)步。

上篇文章中簡單介紹了webpack的最基本用法，且項(xiàng)目結(jié)構(gòu)十分簡單，只有一個(gè)html頁面、一個(gè)css頁面、兩個(gè)js文件。本文將介紹如何使用webpack對具有較為規(guī)范的結(jié)構(gòu)的項(xiàng)目進(jìn)行構(gòu)建。主要包括以下幾個(gè)方面：

進(jìn)一步了解webpack.config.js

進(jìn)一步了解webpack-dev-server

使webpack支持es6語法

我們以最常用最簡單的項(xiàng)目結(jié)構(gòu)來演示，如下：

myPro
    - css
    - src
    - node-modules
    - dist
    - index.html
    - webpack.config.js
    

這樣我們的項(xiàng)目結(jié)構(gòu)就很清晰了。css文件夾中存放樣式文件，src文件夾中存放js文件，node-modules中是我們用到的各種包，dist文件存放打包生成的文件。現(xiàn)在我希望做到以下兩點(diǎn)

css使用less編寫

打包文件到dist目錄下

第一步，在css文件夾中創(chuàng)建以下兩個(gè)文件
index.less

@import "demo.less";

demo.less

body {
    background: yellow;

    .main {
        width: 200px;
        height: 200px;
        border: 10px solid red;
    }
}

第二步，在src文件夾中創(chuàng)建文件
content.js

module.exports = "it works from content.js";

entry.js

require("../css/index.less");
let content = require("./content.js");
alert(content);

第三部，修改index.html如下：

    
        
        
    
    
        

            
webpack demo
        
    
    

至此，我們看到 1、樣式文件使用了less編寫；2、在index.html頁面中js文件路徑為./dist/bundle.js。

對于1（樣式文件采用less編寫），我們需要使用加載器來處理。首先，需要安裝less-loader，而less-loader依賴于less，因此需要這樣安裝

$ npm install less-loader less

然后再config文件中配置對less文件的處理，如下：

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

這里加入了對less文件的處理，需要注意loader的順序，為style!css!less，意為先使用less加載器處理，解析為普通的css文件，再處理css文件，最后處理樣式，類似于pipe的概念。

在上篇文章中，我們提到了webpack.config.js文件中可以設(shè)置output，作為打包的出口參數(shù)。如下：

output: {
    path: __dirname,
    filename: "bundle.js"
}

這里設(shè)置了兩項(xiàng)：path和filename
其中，path為打包的目錄，__dirname指當(dāng)前目錄，filename指文件名。
這里我們希望將文件打包到dist目錄下，則可以通過配置path來實(shí)現(xiàn)，完整配置如下：

let path = require("path");

module.exports = {
    entry: "./src/entry.js",
    output: {
        path: path.join( __dirname, "/dist"), //這里配置打包路徑
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /.css$/, 
                loader: "style!css"
            },
            {
                test: /.less$/,
                loader: "style!css!less"
            }
        ]
    }
};

至此，我們完成了兩步，1、對less文件正確處理； 2、將文件打包到dist目錄下。
打包：

$ webpack

用瀏覽器打開index.html頁面，可以看到：

上篇文章提到，webpack-dev-server為我們提供了一個(gè)小型的基于node的express服務(wù)器，使我們可以通過http://localhost:8080/webpack-dev-server/來訪問頁面，并且它可以監(jiān)測文件的變化并在頁面中實(shí)時(shí)顯示出來。現(xiàn)在我們再來試下：
啟動(dòng)webpack-dev-server

$ webpack-dev-server

訪問http://localhost:8080/webpack-dev-server/
修改content.js文件如下：

module.exports = "it is another content from content.js";

可以看到，頁面自動(dòng)進(jìn)行了刷新，但是alert的內(nèi)容卻沒有變。這說明監(jiān)測到了文件的變化，但是我們的index.html加載的js文件并沒有變。
那問題出在哪里？

webpack-dev-server通過sockjs實(shí)現(xiàn)實(shí)時(shí)變化監(jiān)測，當(dāng)文件變化時(shí)，服務(wù)器就會(huì)向客戶端發(fā)送通知，客戶端重新渲染。
每次文件變化都會(huì)觸發(fā)webpack-dev-server對文件進(jìn)行重新編譯，但是這個(gè)編譯后的文件并不會(huì)每次都保存到我們的dist目錄下，而是存放在內(nèi)存中，默認(rèn)情況下，這個(gè)文件的路徑為當(dāng)前路徑。也就是說，每次文件變化后，內(nèi)存中的bundle.js做出了實(shí)時(shí)的變化，而output中配置的文件其實(shí)并沒有變。也就是說，如果我們在index.html中使用./bundle.js則能夠?qū)崿F(xiàn)頁面內(nèi)容的實(shí)時(shí)更新。
那么，如何配置可以使其支持我們當(dāng)前的寫法./dist/bunlde.js呢？就需要用到publicPath這個(gè)屬性。

webpack-dev-server默認(rèn)支持文件路徑為當(dāng)前的路徑，可以通過在output中配置publicPath屬性對其進(jìn)行更改，如下：

output: {
    path: path.join( __dirname, "/dist"),
    publicPath: "/dist/",
    filename: "bundle.js"
}

這樣設(shè)置我們就可以通過./dist/bundle.js路徑訪問到內(nèi)存中的文件，在當(dāng)前路徑下已經(jīng)存在同名文件的情況下，webpack-dev-server會(huì)優(yōu)先使用內(nèi)存中的文件。

至此，我們已經(jīng)實(shí)現(xiàn)了：

使用less編寫樣式文件

將文件打包到指定目錄

監(jiān)測文件變化并實(shí)時(shí)展示

看到，現(xiàn)在我們還是采用的commonJS的規(guī)范來實(shí)現(xiàn)模塊化，而es6為我們提供了export和import語法來支持模塊化，如果想要在項(xiàng)目中使用es6，同樣可以通過webpack來配置實(shí)現(xiàn)。

使webpack支持es6需要用到babel，它可以幫助我們將es6語法轉(zhuǎn)化為es5的格式，可以在這里測試。
首先，需要安裝babel

$ npm install babel-loader babel-core

安裝babel-preset

$ npm install babel-preset-es2015

然后，配置webpack.config.js，如下：

module: {
  loaders: [
    { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

最后還需要加上babel的配置文件，在項(xiàng)目的根目錄下創(chuàng)建文件.babelrc

{ "presets": ["es2015"] }

這樣，我們的webpack就支持通過es6的export和import實(shí)現(xiàn)模塊化了。
修改content.js內(nèi)容如下：

var content = "it is the origin content from content.js";

export {content};

修改entry.js內(nèi)容如下：

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

import {content} from "./content";

let div = document.getElementById("main");
div.innerHTML = content;

可以看到，我們現(xiàn)在通過es6的import和export實(shí)現(xiàn)js的模塊化，打包：

$ webpack

打包成功。

本文介紹了如何使用webpack對一個(gè)較為系統(tǒng)的項(xiàng)目進(jìn)行打包，并支持less,es6，同時(shí)對webpack-dev-server的原理進(jìn)行了簡要說明。后續(xù)還會(huì)更深入地學(xué)習(xí)webpack，希望和大家一同進(jìn)步。

（本文完）