webpack學習（二）—— 進階

時間 2019-11-07

標籤 webpack 學習進階简体版

原文原文鏈接

上篇文章中簡單介紹了webpack的最基本用法，且項目結構十分簡單，只有一個html頁面、一個css頁面、兩個js文件。本文將介紹如何使用webpack對具備較爲規範的結構的項目進行構建。主要包括如下幾個方面：javascript

進一步瞭解webpack.config.jscss
進一步瞭解webpack-dev-serverhtml
使webpack支持es6語法java

關於`webpack.config.js`

咱們以最經常使用最簡單的項目結構來演示，以下：node

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

這樣咱們的項目結構就很清晰了。css文件夾中存放樣式文件，src文件夾中存放js文件，node-modules中是咱們用到的各類包，dist文件存放打包生成的文件。如今我但願作到如下兩點webpack

css使用less編寫es6
打包文件到dist目錄下web

第一步，在css文件夾中建立如下兩個文件
index.lessexpress

@import 'demo.less';

demo.lessnpm

body {
    background: yellow;

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

第二步，在src文件夾中建立文件
content.js

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

entry.js

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

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>webpack demo</title>
    </head>
    <body>
        <div class="main" id="main">
            <p>webpack demo</p>
        </div>
    </body>
    <script type="text/javascript" src="./dist/bundle.js"></script>
</html>

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

配置less-loader

對於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的概念。

設置output

在上篇文章中，咱們提到了webpack.config.js文件中能夠設置output，做爲打包的出口參數。以下：

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

這裏設置了兩項：path和filename
其中，path爲打包的目錄，__dirname指當前目錄，filename指文件名。
這裏咱們但願將文件打包到dist目錄下，則能夠經過配置path來實現，完整配置以下：

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"
            }
        ]
    }
};

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

$ webpack

用瀏覽器打開index.html頁面，能夠看到：

進一步瞭解webpack-dev-server

上篇文章提到，webpack-dev-server爲咱們提供了一個小型的基於node的express服務器，使咱們能夠經過http://localhost:8080/webpack-dev-server/來訪問頁面，而且它能夠監測文件的變化並在頁面中實時顯示出來。如今咱們再來試下：
啓動webpack-dev-server

$ webpack-dev-server

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

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

能夠看到，頁面自動進行了刷新，可是alert的內容卻沒有變。這說明監測到了文件的變化，可是咱們的index.html加載的js文件並無變。
那問題出在哪裏？

`webpack-dev-server`原理

webpack-dev-server經過sockjs實現實時變化監測，當文件變化時，服務器就會向客戶端發送通知，客戶端從新渲染。
每次文件變化都會觸發webpack-dev-server對文件進行從新編譯，可是這個編譯後的文件並不會每次都保存到咱們的dist目錄下，而是存放在內存中，默認狀況下，這個文件的路徑爲當前路徑。也就是說，每次文件變化後，內存中的bundle.js作出了實時的變化，而output中配置的文件其實並無變。也就是說，若是咱們在index.html中使用./bundle.js則可以實現頁面內容的實時更新。
那麼，如何配置可使其支持咱們當前的寫法./dist/bunlde.js呢？就須要用到publicPath這個屬性。

`output`的`publicPath`屬性

webpack-dev-server默認支持文件路徑爲當前的路徑，能夠經過在output中配置publicPath屬性對其進行更改，以下：

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

這樣設置咱們就能夠經過./dist/bundle.js路徑訪問到內存中的文件，在當前路徑下已經存在同名文件的狀況下，webpack-dev-server會優先使用內存中的文件。

至此，咱們已經實現了：

使用less編寫樣式文件
將文件打包到指定目錄
監測文件變化並實時展現

看到，如今咱們仍是採用的commonJS的規範來實現模塊化，而es6爲咱們提供了export和import語法來支持模塊化，若是想要在項目中使用es6，一樣能夠經過webpack來配置實現。

`webpack`支持`es6`

使webpack支持es6須要用到babel，它能夠幫助咱們將es6語法轉化爲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的配置文件，在項目的根目錄下建立文件.babelrc

{ "presets": ["es2015"] }

這樣，咱們的webpack就支持經過es6的export和import實現模塊化了。
修改content.js內容以下：

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

export {content};

修改entry.js內容以下：

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

import {content} from './content';

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

能夠看到，咱們如今經過es6的import和export實現js的模塊化，打包：

$ webpack

打包成功。

結語

本文介紹瞭如何使用webpack對一個較爲系統的項目進行打包，並支持less,es6，同時對webpack-dev-server的原理進行了簡要說明。後續還會更深刻地學習webpack，但願和你們一同進步。

（本文完）

相關標籤/搜索

每日一句

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

webpack學習（二）—— 進階

關於webpack.config.js