webpack打包js

Rango 發布于2019-08-22 15:16 / 1379人閱讀

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

webpack打包的兩種方式

webpack entry output （命令行）

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運行，控制臺會打印：sum(21, 22) 43 。

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

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

// 配置文件使用commonjs規范

module.exports = {

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

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

在命令行輸入：webpack --config webpack.conf.js，發現生成了一個app.dd1c6.js帶hash的js文件。將這個js文件引入HTML里面發正常輸出：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規范

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處理，需要上面的兩個插件）

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

Babel Runtime Transform（為開發框架準備），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); // 將以前數組每一項*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"]
}

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93319.html

Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并 ...

SunZhaopeng 2019-05-23 17:29 評論0 收藏0
Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并自...

wangbinke 2019-08-26 13:52 評論0 收藏0
使用模塊化工具打包自己開發的JS庫

摘要：平時有使用過和開發的同學，應該能體會到模塊化開發的好處。原因很簡單打包出來的使用了關鍵字，而小程序內部并支持。是一個模塊打包器，可以將小塊代碼編譯成大塊復雜的代碼，例如或應用程序。官網的這段介紹，正說明了就是用來打包的。博客地址最近有個需求，需要為小程序寫一個SDK，監控小程序的后臺接口調用和頁面報錯(類似fundebug) 聽起來高大上的SDK，其實就是一個JS文件，類似平時開發...

AprilJ 2019-08-26 12:01 評論0 收藏0
基于webpack構建的angular 1.x 工程（一）webpack篇

摘要：基于構建的工程一篇現在都已經出到的版本了，可我對它的認識還是停留在的版本。然后是寫啟動的命令行，也就是上面的這樣寫的意思是，當你輸入你的命令名字就會讓執行你對應命令的語句。我們首先把基本的配置引進來。基于webpack構建的angular 1.x 工程（一）webpack篇 ??現在AngularJS都已經出到4.x的版本了，可我對它的認識還是停留在1.x的版本。 ??之前用它是為...

Anleb 2019-08-21 17:23 評論0 收藏0
[js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數

摘要：，我想大家應該都知道或者聽過，是前端一個工具可以讓各個模塊進行加載預處理再進行打包。 webpack，我想大家應該都知道或者聽過，Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建，比如vue官方就推薦使用webpack.廢話不多說，我們趕緊開始吧. 第一步、安裝webpack 新建文件夾webpack->再在web...

pubdreamcc 2019-08-21 16:27 評論0 收藏0
傻傻分不清的Manifest

摘要：的英文含義是名單種技術的確都是把當做清單使用緩存清單清單打包資源路徑清單打包清單只不過是在不同的場景中使用特定的清單來完成某些功能所以，學好英文是多么重要，這樣才不會傻傻分不清到底是干啥的在前端，說到manifest，其實是有歧義的，就我了解的情況來說，manifest可以指代下列含義： html標簽的manifest屬性: 離線緩存（目前已被廢棄） PWA: 將Web應用程序...

printempw 2019-08-23 17:58 評論0 收藏0