webpack入門

時間 2019-11-18

標籤 webpack 入門简体版

原文原文鏈接

首先什麼是webpack？若是說它是一個打包工具那真的是有點大材小用了。webpack是一個集前端自動化、模塊化、組件化於一體的可拓展系統，你能夠根據本身的須要來進行一系列的配置和安裝，最終實現你須要的功能並進行打包輸出。html

webpack最簡單的3招開始介紹，即拆分、打包、壓縮。前端

步驟

1.傳統項目中的問題

在不依賴任何自動化、模塊化工具的項目中，一般咱們的代碼是這樣的：jquery

index.htmlwebpack

<html>
  <head>
    <title>傳統項目</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

app/index.jsweb

function main() {
    $('body').html('hello world!');
}

main();

以上示例中，腳本之間存在着隱式依賴關係。npm

index.js取決於被包括在頁面運行以前的jQuery，它只是假設有一個全局變量$的存在。json

這樣管理JavaScript項目有一些問題：瀏覽器

若是依賴項丟失，或者包含在錯誤的順序中，應用程序將不會運行。
若是包含依賴項但沒有使用，那麼瀏覽器必須下載不少沒必要要的代碼。app

因此爲了解決以上問題，咱們須要使用webpack來實現一些改變。模塊化

2.準備

首先咱們得在項目中安裝webpack，咱們打開命令行工具運行：

mkdir demo && cd demo // 新建demo文件夾並打開
npm init // 初始化npm，生成package.json配置文件
npm install --save-dev webpack@beta // 安裝webpack2.0版本，mac系統可能須要添加sudo命令

爲了改進上方傳統項目中的不足，咱們這裏還須要安裝jQuery：

npm install --save jQuery // 安裝jQuery

3.改變

改變後的index.js

var $ = require('jquery');

function main() {
    $('body').html('hello world!');
}

main();

這裏咱們能夠直接在index.js裏引用jQuery，index.js明確要求jQuery的存在，這樣就不存在隱式依賴的問題（沒有全局污染）。

改變後的index.html

<html>
  <head>
    <title>webpack項目</title>
  </head>
  <body>
      <script src="dist/bundle.js"></script>
  </body>
</html>

這裏咱們的index.html文件只引入了最終打包後的bundle.js。如今運行webpack命令將index.js輸出爲bundle.js。

運行命令：webpack app/index.js dist/bundle.js

4.拆分

如今若是咱們index.js中的」hello world!」字符串須要放到另一個hello.js中，而後在index.js中引入使用的話，這就涉及到webpack模塊拆分的功能。

app/index.js

var $ = require('jquery');
var str = require('./hello.js');

function main() {
    $('body').html(str);
}

main();

app/hello.js

var str = 'hello world!';

module.exports = str;

咱們在hello.js中經過module.exports導出str變量，而後在index.js經過require導入一樣能夠實現瀏覽器中輸入「hello world!」的效果，固然咱們須要從新運行下webpack命令：webpack app/index.js dist/bundle.js

5.打包

其實在上面咱們已經使用了打包命令，其中的app/index.js即爲打包的入口文件，而dist/bundle.js爲輸出文件。

可是咱們會發現這樣的命令不利於咱們複雜項目配置的使用，對於更復雜的配置，咱們能夠利用配置文件webpack.config.js來統一管理。

webpack.config.js配置文件：

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

上方配置中的entry就是咱們的入口文件，能夠有多個入口文件，而output即爲webpack打包的輸入對象，filename爲輸出文件名，path爲輸出路徑。

如此咱們運行命令行：

webpack --config webpack.config.js

也能夠直接運行簡化的命令：

webpack

webapck會自動去尋找當前目錄下的webpack.config.js文件。

6.壓縮

而若是咱們須要對打包後的代碼進一步壓縮處理，咱們能夠運行命令：

webpack -p

7.進一步壓縮優化

經過webpack的壓縮命令將文件打包並壓縮了，可是對於webpack -p壓縮後的文件來講其實還有壓縮的餘地。若是你使用的是webpack1.0，那麼你能夠在配置文件中添加plugins配置項，而且加入以下插件：

var webpack = require('webpack');

module.exports = {
    ...
    plugins:[
        // 去除代碼塊內的告警語句
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        // 優先考慮使用最多的模塊，併爲它們分配最小的ID
        new webpack.optimize.OccurenceOrderPlugin()
    ]
    ...
}

而本示例中使用的是webpack2.0版本，在2.0中UglifyJsPlugin的compress選項默認爲false，而且OccurrenceOrderPlugin默認啓用，因此無需進行配置。

1. 【 webpack 】- 2 webpack入門
2. webpack入門
3. webpack入門（2）
4. 入門Webpack
5. Webpack入門
6. webpack入門（1）
7. webpack 入門一
8. webpack 入門
9. Webpack入門（三）
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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