一最住、安裝
webpack 是一個(gè)模塊開(kāi)發(fā)工具。它的主要目標(biāo)是將 JavaScript 文件打包在一起怠惶，打包后的文件用于在瀏覽器中使用涨缚，但它也能夠勝任轉(zhuǎn)換 (transform)、打包(bundle)或包裹(package)任何資源(resource or asset)策治。webpack 就兩個(gè)作用一個(gè)打包作用脓魏，一個(gè)用于翻譯作用。
webpack是 nodejs 的工作流工具通惫，首先進(jìn)行安裝：
cnpm install -g webpack webpack-cli
cli 是英語(yǔ) commond line interface 命令行接口的意思茂翔。
webpack 和其插件 webpack-cli
安裝完畢之后，查看版本號(hào)：
4.35.2
二履腋、基本使用
我們的項(xiàng)目很簡(jiǎn)單珊燎，沒(méi)有任何的第三方庫(kù)，沒(méi)有sea.js遵湖、沒(méi)有require.js悔政。寫法幾乎和 node.js 寫法沒(méi)什么區(qū)別。
程序也很簡(jiǎn)單延旧，所有的js文件都在裸奔CMD規(guī)范谋国，沒(méi)有任何的標(biāo)準(zhǔn)殼：
//circle.js
function mianji(a,b){
return a * b ;
}
exports.mianji = mianji;
//main.js
const c = require("./circle");
alert(c.mianji(10,10)) ;
瀏覽器不支持、不兼容任何的require迁沫、exports單詞芦瘾。所以直接運(yùn)行瀏覽器報(bào)錯(cuò)捌蚊。使用webpack可以輕松解決這個(gè)事情！
這時(shí)我們?cè)贑MD窗口中執(zhí)行：
webpack main.js -o ./dist/all.js
o是output輸出的意思近弟。
把main.js 和里面的引報(bào)包合并到 dist 文件目錄下all.js （沒(méi)有文件目錄自動(dòng)創(chuàng)建）
合并的 all.js
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){const r=n(1);alert(r.mianji(10,10))},function(e,t){t.mianji=function(e,t){return e*t}}]);
可以看到代碼前部分算是CMD規(guī)范的定義缅糟，最后幾句給我們寫的代碼加上了標(biāo)準(zhǔn)殼。
//index.html
<script src="js/dst/all.js"></script>
為什么說(shuō)webapck是智能打包藐吮、智能合并溺拱？
- webpack不是無(wú)腦合并js文件！和我們今后要學(xué)習(xí)的Grunt谣辞、Gulp不同迫摔；
- webpack是按圖索驥的，只有require鏈中出現(xiàn)的js文件泥从，才會(huì)被打包到all.js文件中句占！
- 如果多個(gè)文件都require了某文件，這個(gè)文件只會(huì)在all.js中出現(xiàn)一次躯嫉。
三纱烘、 webpack.config.js 文件
很明顯，每次直接輸入是非常狼狽的祈餐。
webpack提供了一個(gè)文件可以配置它擂啥，指導(dǎo)webpack工作。這個(gè)文件的名字叫做webpack.config.js帆阳。名字必須是這個(gè)哺壶，必須放在項(xiàng)目的根目錄。
這個(gè)文件模式背誦：
var path = require("path");
//進(jìn)行配置的東西蜒谤，實(shí)際上是本文件的暴露項(xiàng)山宾，要寫module.exports
module.exports = {
//配置模式，有兩個(gè)單詞可以選擇
//development開(kāi)發(fā)模式鳍徽，代碼不會(huì)混淆资锰、壓縮；
//production生產(chǎn)模式阶祭，項(xiàng)目上線的時(shí)候要使用的模式绷杜。
mode: "development",
//配置入口文件
entry : "./js/main.js" ,
//配置產(chǎn)出文件
output : {
//產(chǎn)出文件文件夾
path : path.resolve(__dirname , "dist") ,
//產(chǎn)出文件的文件名
filename : "all.js"
},
//實(shí)時(shí)監(jiān)測(cè)文件更新，一旦文件更新了濒募，就重新合并打包一份
watch : true
}
寫完這個(gè)文件之后鞭盟，我們就能在項(xiàng)目的根目錄打開(kāi)CMD窗口，輸入簡(jiǎn)單的命令：
webpack
webpack就知道自己找入口文件了萨咳，自己合并到產(chǎn)出文件了，自己監(jiān)聽(tīng)文件的變化了疫稿。
更加自動(dòng)的方式培他，創(chuàng)建身份證鹃两。
npm init
在身份證中改變一下 scripts：
{
"name": "my",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "webpack"
},
"author": "",
"license": "ISC"
}
今后起項(xiàng)目就可以：
npm run dev
三、 babel-loader
Babel是一個(gè)轉(zhuǎn)換編譯器舀凛，它能將 ES6 轉(zhuǎn)換成可以在瀏覽器中運(yùn)行的代碼俊扳。軟件的目的讓開(kāi)發(fā)者使用更新的語(yǔ)法，同時(shí)不用擔(dān)心瀏覽器的兼容問(wèn)題猛遍。
cnpm install babel-core@6 babel-loader@7
安裝的時(shí)候一定要注意馋记，babel 最新版本 8 代和 webpack4 有兼容問(wèn)題，只能指定老版本懊烤。
babel-core是babel的核心梯醒，babel-loader 是 webpack 插件。
通過(guò)看手冊(cè)腌紧，我們知道修改 webpack.config.js 文件：
module: {
rules: [
{
test: /\.m?js$/,//匹配.mjs和.js結(jié)束的文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
所謂的 preset 是什么意思呢茸习？preset表示預(yù)設(shè)置。表示可以把高級(jí)語(yǔ)言翻譯成低級(jí)語(yǔ)言例如 ES6 => ES5壁肋。
npm install --save babel-preset-env
依據(jù)下圖可發(fā)現(xiàn)我們?cè)谂渲玫臅r(shí)候号胚，會(huì)把 babel- 后面第一個(gè)值的作為屬性名，最后一個(gè)值作為屬性值浸遗。
可以進(jìn)行項(xiàng)目啟動(dòng)
npm run dev
可以看見(jiàn) ES6 被翻譯成普通 JS語(yǔ)法猫胁。
為了讓babel能夠翻譯…語(yǔ)法，我們必須安裝一個(gè)babel的插件跛锌，
babel-plugin-transform-object-rest-spread
安裝依賴：
cnpm install babel-plugin-transform-object-rest-spread
改變webpack.config.js文件：
module: {
rules: [
{
test: /\.m?js$/,//匹配.mjs和.js結(jié)束的文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
plugins: ["transform-object-rest-spread"]
}
}
}
]
}
此時(shí)就可以npm run dev：
const obj2 = {
...obj,
}
四弃秆、ES6中的CMD語(yǔ)法
CMD語(yǔ)法是commonjs在2005年左右提出的語(yǔ)法，被nodejs全盤采納察净。
腦殘的 w3c 卻非得這樣定義：
ES6對(duì)應(yīng)CMD簡(jiǎn)單的對(duì)應(yīng)關(guān)系：
require變?yōu)榱薸mport
exports變?yōu)榱薳xport
module變?yōu)榱薲efault
控制臺(tái)輸入測(cè)試：
瀏覽器廠商對(duì)此很抗議驾茴，到今天2019年7月5日，沒(méi)有任何瀏覽器支持上述語(yǔ)法氢卡。
但是webpack支持锈至，webpack在沒(méi)有babel-loader的存在下，天生能夠識(shí)別import的導(dǎo)入語(yǔ)法译秦，從而進(jìn)行智能的文件合并峡捡。
- 基本的暴露和引入
//circle.js
export const mianji = function (a,b){
return a * b ;
}
//main.js
import {mianji} from "./circle.js";
var a = prompt("下午好，請(qǐng)輸入一個(gè)數(shù)");
var b = prompt("下午好筑悴，請(qǐng)輸入另一個(gè)數(shù)");
alert(mianji(a,b));
必須在export后面加上const或者let或者var们拙。大括號(hào)中的函數(shù)名字，必須嚴(yán)格和暴露的名字相同阁吝！
- 命名空間
如果兩個(gè)包中都有mianji函數(shù)砚婆，此時(shí)用import {mianji}就沖突了。
就需要使用命名空間，必須使用import * as 名字 from ""這樣的語(yǔ)法：
import * as m from "./circle.js";
var a = prompt("下午好装盯，請(qǐng)輸入一個(gè)數(shù)");
var b = prompt("下午好坷虑，請(qǐng)輸入另一個(gè)數(shù)");
alert(m.mianji(a,b));//請(qǐng)注意這里的調(diào)用不同
- 默認(rèn)暴露
導(dǎo)入的時(shí)候，普通暴露加大括號(hào)埂奈，默認(rèn)暴露不加大括號(hào)迄损，中間用逗號(hào)隔開(kāi)。
//circle.js
export const mianji = function (a,b){
return a * b ;
}
var m =6;
export default m;
//main.js
import m,{mianji} from "./circle.js";
var a = prompt("下午好账磺，請(qǐng)輸入一個(gè)數(shù)");
var b = prompt("下午好芹敌，請(qǐng)輸入另一個(gè)數(shù)");
alert(mianji(a,b));
alert(m);
五、less 變?yōu)?CSS
less-loader：https://www.npmjs.com/package/less-loader
CSS 樣式表是扁平化鏈?zhǔn)秸Z(yǔ)法垮抗。
less 讓樣式表更加立體化氏捞。
body{
background:aquamarine;
@c : orange; //變量
h1{
color : @c;
}
}
但是瀏覽器識(shí)別不了此種語(yǔ)法，我們需要安裝less和 less-loader借宵、style-loader幌衣、css-loader 三個(gè)插件轉(zhuǎn)化一下。
打開(kāi) webpack.config.js
//配置插件
module: {
rules: [
{
// 以less結(jié)尾的文件
test: /\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
]
}
]
}
引入后import "./me.less";運(yùn)行 npm run dev 打開(kāi)網(wǎng)頁(yè)即生效壤玫。
手動(dòng)轉(zhuǎn)less文件豁护，未全局安裝的時(shí)候。在這里找到node_modules\.bin lessc
運(yùn)行 CMD 命令 lessc a.less b.css => a.less 就變成了 b.css
