webpack如何打包js

這篇文章主要為大家展示了“webpack如何打包js”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“webpack如何打包js”這篇文章吧。

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

在代碼實踐之前，先說一寫webpack的基礎知識。

1、為什要使用WebPack

現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法

1. 模塊化，讓我們可以把復雜的程序細化為小的文件;

2. 類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識別；

3. Scss，less等CSS預處理器

4. …

2、什么是Webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

3、WebPack和Grunt以及Gulp相比有什么特性

其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之后可以自動替你完成這些任務。

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現提供了需求。

Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。

從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。

如果實在要把二者進行比較，Webpack的處理速度更快更直接，能打包更多不同類型的文件。

接下來我們簡單為大家介紹
Webpack如何將多個js文件合并（注意這里只是文件的合并，即將多個寫好的js合成一個js文件，以減少http請求）。

安裝webpack

在安裝 Webpack 前，你本地環境需要支持 node.js。安裝node.js可以參考node官方文檔。

使用如下命令在全局安裝webpack。

$ npm install webpack -g

webpack已經安裝到計算機上，現在可以使用webpack命令了。

在項目中使用webpack

使用以下命令在項目根目錄下生成package.json文件。

$ npm init

安裝webpack到項目中

將webpack加入到pageage.json配制文件中，使用以下命令：

$ npm install --save-dev webpack

此時再看package.json文件，對比package.json剛剛創建時，新增加了一段代碼。

webpack打包的兩種方式

1. webpack entry<entry> output （命令行）

2. webpack -config webpack.conf.js (指定webpack的配置文件)

使用命令行打包js

一：創建兩個js文件

創建app.js, sum.js，sum.js導出一個加法的函數，app.js使用這個函數。

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
  return a + b;
}

二：使用webpack命令打包

在當前目錄下使用： webpack app.js bundle.js ; 這里入口是app.js, 輸出文件是bundle.js，這樣就會看到文件中多出一個bundle.js文件。

創建一個html文件運行，引入bundle.js運行，控制臺會打?。簊um(21, 22) 43 。

使用webapck的配置文件打包（還是上面的兩個js文件）

創建一個webpack.conf.js，編寫wepack的配置文件

// 配置文件使用commonjs規范

module.exports = {

  // 入口，是一個對象
  entry: {
    app: './app.js'
  },

  // 輸出
  output: {
    // 帶五位hash值的js
    filename: '[name].[hash:5].js'
  }
}

1. 在命令行輸入：webpack --config webpack.conf.js，發現生成了一個app.dd1c6.js帶hash的js文件。將這個js文件引入HTML里面發正常輸出：sum(21, 22) 43

2. 配置文件的命名為webpack.config.js，則直接在命令行輸入webpack就可以。

webapck配合babel打包ES6、7

在項目根目錄安裝bable-loader和babel-core，babel-preset

1. 使用npm init生成一個配置文件

2. npm install babel-loader babel-core --save-dev

3. 新建app.js，index.html，webpack.config.js等文件

4. 編寫webpack.config.js

5. 安裝babel-preset來指定編譯的版本：npm install babel-preset-env --save-dev

6. 在app.js里面隨便寫一些ES6的語法

7. 使用命令行輸入webpack進行編譯

webpack配置文件

// 配置文件使用commonjs規范
module.exports = {

  // 入口，是一個對象
  entry: {
    app: './app.js' // 相對路徑
  },

  // 輸出
  output: {
    // 帶五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一項是一個規則
    rules:[
      {
        test: /\.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
        use: {
          loader: 'babel-loader', // 使用bable-loader來處理
          options: { // 指定參數
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //具體可以去babel-preset里面查看
                } 
              }]
              
            ] // 指定哪些語法編譯
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

app.js和編譯之后帶hash的js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 將以前數組每一項*2

console.log(newArr);

// ==================//
// 編譯之后（直接截取了編譯的代碼）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
 return item * 2;
}); // 將以前數組每一項*2

console.log(newArr);

babel的兩個插件：Babel Polyfill 和 Babel Runtime Transform

用來處理一些函數和方法（Genertor,Set,Map,Array.from等未被babel處理，需要上面的兩個插件）

1. Babel Polyfill（全局墊片），npm install babel-polyfill --save, 使用：import "babel-polyfill";

2. Babel Runtime Transform（為開發框架準備），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save

3. 新建一個.babelrc來進行配置

app.js里面新增代碼

import "babel-polyfill";
let func = () => {};
const num = 30; 
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); // 將以前數組每一項*2

console.log(newArr);
// 需要babel-polyfill
arr.includes(8);

// Genertor 函數
function* func2() {
}

webpack配置

// 配置文件使用commonjs規范
module.exports = {
  // 入口，是一個對象
  entry: {
    app: './app.js' // 相對路徑
  },

  // 輸出
  output: {
    // 帶五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一項是一個規則
    rules:[
      {
        test: /\.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
        use: {
          loader: 'babel-loader', // 使用bable-loader來處理
          options: { // 指定參數
            
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

.babelrc文件配置

{
  "presets": [
    ["babel-preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 version"]
      } 
    }] 
  ],
  "plugins": ["transform-runtime"]
}

以上是“webpack如何打包js”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！