資訊專欄INFORMATION COLUMN
摘要：打包的兩種方式命令行指定的配置文件使用命令行打包一創(chuàng)建兩個(gè)文件創(chuàng)建，導(dǎo)出一個(gè)加法的函數(shù)，使用這個(gè)函數(shù)。二使用命令打包在當(dāng)前目錄下使用這里入口是輸出文件是，這樣就會(huì)看到文件中多出一個(gè)文件。創(chuàng)建一個(gè)文件運(yùn)行，引入運(yùn)行，控制臺(tái)會(huì)打印。
webpack打包的兩種方式
webpack entry
webpack -config webpack.conf.js (指定webpack的配置文件)
使用命令行打包js 一：創(chuàng)建兩個(gè)js文件創(chuàng)建app.js, sum.js，sum.js導(dǎo)出一個(gè)加法的函數(shù)，app.js使用這個(gè)函數(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，這樣就會(huì)看到文件中多出一個(gè)bundle.js文件。
創(chuàng)建一個(gè)html文件運(yùn)行，引入bundle.js運(yùn)行，控制臺(tái)會(huì)打?。簊um(21, 22) 43 。
使用webapck的配置文件打包（還是上面的兩個(gè)js文件）創(chuàng)建一個(gè)webpack.conf.js，編寫(xiě)wepack的配置文件
// 配置文件使用commonjs規(guī)范
module.exports = {
// 入口，是一個(gè)對(duì)象
entry: {
app: "./app.js"
},
// 輸出
output: {
// 帶五位hash值的js
filename: "[name].[hash:5].js"
}
}
在命令行輸入：webpack --config webpack.conf.js，發(fā)現(xiàn)生成了一個(gè)app.dd1c6.js帶hash的js文件。將這個(gè)js文件引入HTML里面發(fā)正常輸出：sum(21, 22) 43
配置文件的命名為webpack.config.js，則直接在命令行輸入webpack就可以。
webapck配合babel打包ES6、7 在項(xiàng)目根目錄安裝bable-loader和babel-core，babel-preset使用npm init生成一個(gè)配置文件
npm install babel-loader babel-core --save-dev
新建app.js，index.html，webpack.config.js等文件
編寫(xiě)webpack.config.js
安裝babel-preset來(lái)指定編譯的版本：npm install babel-preset-env --save-dev
在app.js里面隨便寫(xiě)一些ES6的語(yǔ)法
使用命令行輸入webpack進(jìn)行編譯
webpack配置文件// 配置文件使用commonjs規(guī)范
module.exports = {
// 入口，是一個(gè)對(duì)象
entry: {
app: "./app.js" // 相對(duì)路徑
},
// 輸出
output: {
// 帶五位hash值的js
filename: "[name].[hash:8].js"
},
// 指定loader
module: {
// rules中的每一項(xiàng)是一個(gè)規(guī)則
rules:[
{
test: /.js$/, // 值一個(gè)正則，符合這些正則的資源會(huì)用一個(gè)loade來(lái)處理
use: {
loader: "babel-loader", // 使用bable-loader來(lái)處理
options: { // 指定參數(shù)
presets: [
["babel-preset-env", {
targets: {
browsers: ["> 1%", "last 2 version"] //具體可以去babel-preset里面查看
}
}]
] // 指定哪些語(yǔ)法編譯
}
},
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ù)組每一項(xiàng)*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ù)組每一項(xiàng)*2
console.log(newArr);
babel的兩個(gè)插件：Babel Polyfill 和 Babel Runtime Transform
用來(lái)處理一些函數(shù)和方法（Genertor,Set,Map,Array.from等未被babel處理，需要上面的兩個(gè)插件）
Babel Polyfill（全局墊片），npm install babel-polyfill --save, 使用：import "babel-polyfill";
Babel Runtime Transform（為開(kāi)發(fā)框架準(zhǔn)備），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
新建一個(gè).babelrc來(lái)進(jìn)行配置
app.js里面新增代碼
import "babel-polyfill";
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); // 將以前數(shù)組每一項(xiàng)*2
console.log(newArr);
// 需要babel-polyfill
arr.includes(8);
// Genertor 函數(shù)
function* func2() {
}
// 配置文件使用commonjs規(guī)范
module.exports = {
// 入口，是一個(gè)對(duì)象
entry: {
app: "./app.js" // 相對(duì)路徑
},
// 輸出
output: {
// 帶五位hash值的js
filename: "[name].[hash:8].js"
},
// 指定loader
module: {
// rules中的每一項(xiàng)是一個(gè)規(guī)則
rules:[
{
test: /.js$/, // 值一個(gè)正則，符合這些正則的資源會(huì)用一個(gè)loade來(lái)處理
use: {
loader: "babel-loader", // 使用bable-loader來(lái)處理
options: { // 指定參數(shù)
}
},
exclude: "/node_module/" // 排除在外
}
]
}
}
.babelrc文件配置
{
"presets": [
["babel-preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 version"]
}
}]
],
"plugins": ["transform-runtime"]
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93319.html
前言 什么是webpack 本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 ...
前言 什么是webpack 本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 自...
摘要：平時(shí)有使用過(guò)和開(kāi)發(fā)的同學(xué)，應(yīng)該能體會(huì)到模塊化開(kāi)發(fā)的好處。原因很簡(jiǎn)單打包出來(lái)的使用了關(guān)鍵字，而小程序內(nèi)部并支持。是一個(gè)模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，例如或應(yīng)用程序。官網(wǎng)的這段介紹，正說(shuō)明了就是用來(lái)打包的。 博客地址 最近有個(gè)需求，需要為小程序?qū)懸粋€(gè)SDK，監(jiān)控小程序的后臺(tái)接口調(diào)用和頁(yè)面報(bào)錯(cuò)(類似fundebug) 聽(tīng)起來(lái)高大上的SDK，其實(shí)就是一個(gè)JS文件，類似平時(shí)開(kāi)發(fā)...
摘要：基于構(gòu)建的工程一篇現(xiàn)在都已經(jīng)出到的版本了，可我對(duì)它的認(rèn)識(shí)還是停留在的版本。然后是寫(xiě)啟動(dòng)的命令行，也就是上面的這樣寫(xiě)的意思是，當(dāng)你輸入你的命令名字就會(huì)讓執(zhí)行你對(duì)應(yīng)命令的語(yǔ)句。我們首先把基本的配置引進(jìn)來(lái)。 基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇 ??現(xiàn)在AngularJS都已經(jīng)出到4.x的版本了，可我對(duì)它的認(rèn)識(shí)還是停留在1.x的版本。 ??之前用它是為...
摘要：，我想大家應(yīng)該都知道或者聽(tīng)過(guò)，是前端一個(gè)工具可以讓各個(gè)模塊進(jìn)行加載預(yù)處理再進(jìn)行打包。 webpack，我想大家應(yīng)該都知道或者聽(tīng)過(guò)，Webpack是前端一個(gè)工具,可以讓各個(gè)模塊進(jìn)行加載,預(yù)處理,再進(jìn)行打包?，F(xiàn)代的前端開(kāi)發(fā)很多環(huán)境都依賴webpack構(gòu)建，比如vue官方就推薦使用webpack.廢話不多說(shuō)，我們趕緊開(kāi)始吧. 第一步、安裝webpack 新建文件夾webpack->再在web...
摘要：的英文含義是名單種技術(shù)的確都是把當(dāng)做清單使用緩存清單清單打包資源路徑清單打包清單只不過(guò)是在不同的場(chǎng)景中使用特定的清單來(lái)完成某些功能所以，學(xué)好英文是多么重要，這樣才不會(huì)傻傻分不清到底是干啥的 在前端，說(shuō)到manifest，其實(shí)是有歧義的，就我了解的情況來(lái)說(shuō)，manifest可以指代下列含義： html標(biāo)簽的manifest屬性: 離線緩存（目前已被廢棄） PWA: 將Web應(yīng)用程序...
閱讀 1745·2021-11-15 11:38
閱讀 4635·2021-09-22 15:33
閱讀 2406·2021-08-30 09:46
閱讀 2253·2019-08-30 15:43
閱讀 898·2019-08-30 14:16
閱讀 2149·2019-08-30 13:09
閱讀 1347·2019-08-30 11:25
閱讀 770·2019-08-29 16:42
