(二)webpack入門——webpack的使用

時間 2019-11-20

標籤 webpack 入門使用简体版

原文原文鏈接

上一篇文章（一）webpack入門——webpack的安裝中，咱們知道了webpack的安裝，接下來咱們要學習如何使用webpack。javascript

如下內容來自webpack文檔（不是直譯）: http://webpack.github.io/docs/usage.htmlhtml

簡單的webpack使用

建立一個模塊化的Javascript項目

建立一個文件件，在文件夾裏面建立兩個js文件，分別命名爲cats.js、app.js，並使用CommonJs語法來建立文件內容。

cats.js文件內容：

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

app.js(entry point)內容：

cats = require('./cats.js');
console.log(cats);

'entry point'即應用程序開始的地方，也是webpack開始跟蹤模塊之間依賴的地方。

開始打包

給webpack一我的口文件（app.js）,設置一個特殊的輸出文件（app.bundle.js）:

webpack app.js app.bundle.js

app.bundle.js部份內容：

因而可知，不只app.js裏面的內容被打包進app.bundle.js，app.js所依賴度cats.js也被打包了進來。webpack打包原理是邊讀邊分析入口文件的依賴，分析入口文件依賴的文件的依賴，以此類推，只要有依賴都去分析並打包到輸出文件(app.bundle.js)中,下圖很直觀的展現了webpack打包原理：

打包文件已打包好，如今能夠用運行 node app.bundle.js 命令看看輸出內容(cats模塊被輸出出來了)：

複雜的webpack使用

經過以上內容，咱們大概知道了webpack是怎麼打包運行的，如今咱們來看看複雜一點的案例。

webpack 是一個很是靈活的模塊打包工具。它提供了不少高級特性，可是不是全部的特性都是經過命令行來使用的。想要使用更多的webpack特性，須要建立配置文件。

項目結構

在真實的webpack項目中，咱們會將資源文件和打包文件分開組織在不一樣的文件夾中。在接下來的例子中咱們將資源文件放在 src 文件夾中，打包文件放在 dist 中。

咱們最終的項目目錄結構是這樣的：

開始建立項目，建立文件夾及文件。

1.建立項目文件命名爲demo

2.在demo文件夾中建立src和dist文件夾

3.在src文件夾中建立app.js、cats.js，內容和對應的上面的app.js、cats.js內容同樣。

4.用如下命令初始化項目，建立package.json配置文件。

npm init

5.安裝webpack插件，而且講webpack插件配置到package.json文件中

npm install webpack --save-devjava

建立及配置webpack配置文件

1.建立webpack.config.js文件，內容爲：

 module.exports = {
     entry: './src/app.js',
     output: {
         path: './dist',
         filename: 'app.bundle.js'
     }
 };

2.有了配置文件後，就能夠簡單的用webpack命令進行打包了 .

webpack

dist文件夾下就多了一個app.bundle.js文件.

3. 運行node dist/app.bundle.js命令，又能夠獲得cats的數組列表。

node dist/app.bundle.js

['dave', 'henry', 'martha']

使用loaders

webpack只支持本地JavaScript模塊，可是不少人使用ES201五、CoffeeScript、TypeScript等的轉譯器。webpack的‘loaders’便可解決轉譯的問題。Loaders是特殊的模塊，webpack用來加載其餘的用別的語言寫的模塊到webpack能夠識別的JavaScript中。例如，babel-loader使用Babel來加載ES2015文件。node

'json-loader'加載JSON文件jquery

Loaders能夠是被連接的，的確有些時候你須要講loaders連接在一塊兒。例如。‘yaml-loader’只能將YAML轉換成JSON.所以，你須要將它連接到‘json-loader’因此纔可使用。

用babel-loader轉譯ES2015

在這個例子中，咱們將會告訴webpack經過Babel運行咱們的資源文件因此咱們可使用ES2015的特性

1.安裝Babel和presets:

npm install babel-core babel-preset-es2015

2.安裝babel-loader:

npm install babel-loader --save-dev

3.添加一個以.babelrc命名的文件，並使用presets配置Babel

{ "presets": [ "es2015" ] }

4.修改 webpack.config.js使得'babel-loader'來處理全部.js結尾的文件

 module.exports = {
     entry: './src/app.js',
     output: {
         path: './dist',
         filename: 'app.bundle.js',
     },
     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
         }]
     }
 }

其中exclude: /node_modules/配置是將node_modules文件下的內容排除在外，下降編譯時間。

5.安裝你想使用的libraries例如jquery

 npm install jquery babel-polyfill --save

如今咱們使用--save代替以前使用的--save-dev，這些libraries將在運行時候使用。咱們使用了babel-polyfill,所以在老的瀏覽器中ES2015 API是可用的。

6.修改src/app.js文件

 import 'babel-polyfill';
 import cats from './cats';
 import $ from 'jquery';

 $('<h1>Cats</h1>').appendTo('body');
 const ul = $('<ul></ul>').appendTo('body');
 for (const cat of cats) {
     $('<li></li>').text(cat).appendTo(ul);
 }

7.用webpack打包模塊

  webpack

8. 加載index.html文件這個app才能運行起來webpack

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
</head>
<body>
    <scriptsrc="dist/app.bundle.js"charset="utf-8"></script>
</body>
</html>

當你打開index.html時，你能夠看到cats的內容列表git

使用插件

在你的工做流程中，一般你想作一些額外的包的處理。例如壓縮文件便於客戶端更快速的加載。插件能夠解決這個問題。咱們將會增長uglify插件到配置文件中：github

const webpack = require('webpack');

module.exports = {
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}

uglify插件包含在webpack裏，因此不須要額外的引用模塊，可是不是全部的都是這樣，webpack不包含的插件，第三方插件或者本身寫的插件是要包含額外的引用模塊的。web

相關標籤/搜索

每日一句

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