webpack打包js

Rango 發(fā)布于2019-08-22 15:16 / 1386人閱讀

摘要：打包的兩種方式命令行指定的配置文件使用命令行打包一創(chuàng)建兩個文件創(chuàng)建，導(dǎo)出一個加法的函數(shù)，使用這個函數(shù)。二使用命令打包在當(dāng)前目錄下使用這里入口是輸出文件是，這樣就會看到文件中多出一個文件。創(chuàng)建一個文件運行，引入運行，控制臺會打印。

webpack打包的兩種方式

webpack entry output （命令行）

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

使用命令行打包js 一：創(chuàng)建兩個js文件

創(chuàng)建app.js, sum.js，sum.js導(dǎo)出一個加法的函數(shù)，app.js使用這個函數(shù)。

// 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命令打包

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

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

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

創(chuàng)建一個webpack.conf.js，編寫wepack的配置文件

// 配置文件使用commonjs規(guī)范

module.exports = {

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

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

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

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

webapck配合babel打包ES6、7 在項目根目錄安裝bable-loader和babel-core，babel-preset

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

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

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

編寫webpack.config.js

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

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

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

webpack配置文件

// 配置文件使用commonjs規(guī)范

module.exports = {

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

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

    // 指定loader
    module: {

        // rules中的每一項是一個規(guī)則
        rules:[
            {
                test: /.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
                use: {
                   loader: "babel-loader", // 使用bable-loader來處理
                   options: {  // 指定參數(shù)
                        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); // 將以前數(shù)組每一項*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;
}); // 將以前數(shù)組每一項*2

console.log(newArr);

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

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

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

Babel Runtime Transform（為開發(fā)框架準(zhǔn)備），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save

新建一個.babelrc來進行配置

app.js里面新增代碼

import "babel-polyfill";
let func = () => {};
const num = 30;  
let arr = [3, 4, 5, 6];

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

console.log(newArr);


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

// Genertor 函數(shù)
function* func2() {

}

webpack配置

// 配置文件使用commonjs規(guī)范

module.exports = {

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

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

    // 指定loader
    module: {

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

.babelrc文件配置

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

GPU云服務(wù)器云服務(wù)器 Webpack打包分塊 js怎樣打包移動端js圖片打包 cdn按需打包js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93319.html

發(fā)表評論

登陸后可評論

0條評論

Rango

男|高級講師

我要關(guān)注我要私信

TA的文章

C語言實現(xiàn)初級掃雷

閱讀 1687·2021-11-15 11:38
國慶怎么把主機帶回家-怎么把臺式電腦帶回家？

閱讀 4545·2021-09-22 15:33
RackNerd：洛杉磯/德國/法國等虛擬主機，50GB SSD空間，2TB月流量，年付9.98美金

閱讀 2348·2021-08-30 09:46
8個有用的 CSS 技巧:視差圖像，sticky footer 等等

閱讀 2194·2019-08-30 15:43
關(guān)于CSS的個人理解

閱讀 840·2019-08-30 14:16
響應(yīng)式開發(fā)中合理選定CSS媒體查詢分割點

閱讀 2087·2019-08-30 13:09
校招社招必備核心前端面試問題與詳細(xì)解答

閱讀 1265·2019-08-30 11:25
前端工具【3】—— 圖片處理

閱讀 714·2019-08-29 16:42

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack打包js

webpack配置

相關(guān)文章

Webpack入門到精通（1）

Webpack入門到精通（1）

使用模塊化工具打包自己開發(fā)的JS庫

**基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇**

**[js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數(shù)**

傻傻分不清的Manifest

發(fā)表評論

0條評論

Rango

男|高級講師

TA的文章

C語言實現(xiàn)初級掃雷

國慶怎么把主機帶回家-怎么把臺式電腦帶回家？

RackNerd：洛杉磯/德國/法國等虛擬主機，50GB SSD空間，2TB月流量，年付9.98美金

8個有用的 CSS 技巧:視差圖像，sticky footer 等等

關(guān)于CSS的個人理解

響應(yīng)式開發(fā)中合理選定CSS媒體查詢分割點

校招社招必備核心前端面試問題與詳細(xì)解答

前端工具【3】—— 圖片處理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack打包js

webpack配置

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！