快速的帶各位同學入門這款自動化工具，看完之后你就懂了，你就真的懂了
一定要看看我粘貼的代碼，注釋都在里面寫著呢腕铸，如果你是在那啥，就直接看看注釋就行了也沒問題
既然能看到這篇文章铛碑，你應該明白了一些webpack的基礎了吧狠裹，我就直接開始寫了
安裝
我們的第一步就是安裝webpack了，首先新建一個目錄進去
npm init
// 或者使用yarn
yarn init
然后我們
npm i -D webpack webpack-cli
// 或者使用yarn
yarn add -D webpack webpack-cli
最后我們就可以使用如下命令查看webpack版本了,如果安裝上了的話
npx webpack -v
其實說webpack就完全在說loader一樣亚茬，webpack必須使用loader才能工作酪耳，沒有l(wèi)oader的webpack什么都做不了
在此之前我們再安裝一下webpack的靜態(tài)服務器吧
npm i -D webpack-dev-server
這個東西跟webpack是一個家族的，所以配置的時候直接再webpack的配置文件中寫就行了
配置
文件根目錄新建一個webpack.config.js文件刹缝，這是一基本內容
// 這就是一個js文件碗暗，所以直接使用js的語法就行了，不要以為這是個啥啥啥
for (let i = 0; i < 10000; i++) {
// 我在這里寫個for循環(huán)都沒有問題梢夯，你明白吧
console.log(i);
}
module.exports = {
}
配置package.json scripts
然后我們鍵入這些內容之后言疗，我們直接運行一下webpack看看吧，在這之前我們配置一下package.json文件颂砸，因為方便啊
我們去新增一個scirpts字段里面寫上如上代碼噪奄，然后我們就可以運行webpack看看了
npm run build
// yarn
yarn build
基本配置
不出意外的話，應該是執(zhí)行完for循環(huán)之后就報錯了人乓，你明白吧勤篮，那么現(xiàn)在我們需要配置webpack了
const path = require("path")
module.exports = {
// 可選的production 對應生成環(huán)境 指定這個東西后面可以有對應的插件進行判斷mode優(yōu)化
// 比如說再production環(huán)境就需要去進行代碼的壓縮啊，圖片的合并之類的色罚，但生產環(huán)境只要打包資源就行了
mode: "development", // 開發(fā)環(huán)境
// 入口文件碰缔，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進行跟蹤資源打包的
// 后面你就懂了
entry:"./src/main.js",
output:{
// 這是一個絕對路徑戳护，所以我們需要使用nodejs自帶的模塊path進行完成了
// 代表打包到dist目錄下
path:path.resolve(__dirname,"dist"),
// 入口文件以及里面引入的所有js代碼都會被打包到一個文件
// 這個字段可以為這個文件取一個名字金抡，你沒寫這個字段我也不知道會發(fā)生些什么
filename:"all.js",
// 打包之后的html文件內加載資源的相對路徑
publicPath:"/assets/"
}
}
你把這上面的一寫瀑焦，然后在新建一個src目錄并新建一個main.js文件，然后我們隨便寫一點內容都行啊梗肝，然后就直接開始打包吧榛瓮，比如說我這里main.js這樣寫的
for(let i=0;i<10000;i++){
}
console.log("作死完成");
然后我們直接開始打包吧
npm run build
跑起來，我們就會發(fā)現(xiàn)webpack已經幫我們打包好了巫击，那么這就是我現(xiàn)在的目錄結構了
然后你會發(fā)現(xiàn)打包之后的文件咱也看不懂禀晓，咱也不敢問，老老實實學怎么用就行了吧喘鸟，管他底層怎么實現(xiàn)的匆绣，然后我們先跑一下打包之后的文件試試能不能運行吧
cd dist
node all.js
然后這就完成了驻右，因為這就是一個完整的打包流程了什黑，之后就是加上各種loader啊插件啊讓在打包的過程中給他轉換語法啊加前綴啊合并啊壓縮啊混肴啊等等等等，你明白吧
babel-loader 轉換語法
首先說說第一個loader堪夭，就是webpack跟babel協(xié)作轉換語法并打包的loader
那么首先我們需要安裝如下工具
npm i -D @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime babel-loader
// 然后安裝polyfill
npm i @babel/polyfill
然后我們就開始配置我們的第一個loader吧愕把，首先因為使用了babel我們需要在main.js中寫一下高級語法
class Person {
constructor(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
sayHello() {
console.log("hello iam" + this.name + " " + this.age + " " + this.sex);
}
}
new Person("suiyue",10,"男").sayHello();
然后我們開始配置loader了
const path = require("path")
module.exports = {
// 可選的production 對應生成環(huán)境 指定這個東西后面可以有對應的插件進行判斷mode優(yōu)化
// 比如說再production環(huán)境就需要去進行代碼的壓縮啊，圖片的合并之類的森爽，但生產環(huán)境只要打包資源就行了
mode: "development", // 開發(fā)環(huán)境
// 入口文件恨豁，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進行跟蹤資源打包的
// 后面你就懂了
entry:"./src/main.js",
output:{
// 這是一個絕對路徑爬迟，所以我們需要使用nodejs自帶的模塊path進行完成了
// 代表打包到dist目錄下
path:path.resolve(__dirname,"dist"),
// 入口文件以及里面引入的所有js代碼都會被打包到一個文件
// 這個字段可以為這個文件取一個名字橘蜜，你沒寫這個字段我也不知道會發(fā)生些什么
filename:"all.js",
// 打包之后的html文件內加載資源的相對路徑
publicPath:"/assets/"
},
// 模塊
module:{
// 規(guī)則
rules:[
{
// 正則表達式匹配entry指定的js文件中使用import或者require引入的文件
// 這里匹配的是引入文件后綴名為.js的文件
test:/\.js$/,
use:{
// 指定要處理的loader
loader:"babel-loader",
// 可以給這個loader傳遞一些參數(shù)
// 在這里就相當于babel.config.js
options:{
presets:["@babel/preset-env"],
plugins:["@babel/plugin-transform-runtime"]
}
}
}
]
}
}
然后我們直接yarn build看看效果吧，然后你就會發(fā)現(xiàn)打包出來的all.js還是看不懂付呕，计福。。徽职。象颖。
這需要明白一點就行了，我們不是寫了一個Person類嗎姆钉，我們就去all.js搜索這個類看看語法不就行了嗎说订？
我覺得當我把這張圖片放在這里的時候，你應該已經懂了潮瓶，這一看就知道是function``function構造器
然后因為接下來處理的資源需要一個完整的頁面環(huán)境了陶冷，所以我們需要新建一個html頁面了
這就是我目前的目錄結構了，這時候我們需要提到一個插件了毯辅，對就是一個插件了
-
html-webpack-plugin --> 打包html文件
這個插件的作用就非常強大了埂伦，你知道吧，我們打包文件之后那么我們就需要在
index.html文件中手動引入這些打包之后的資源了悉罕，你能忍嗎赤屋？并且webpack還默認不會幫我們打包這個index.html文件
（搜索entry指定的js文件然后繼續(xù)追尋對應的import或者required的js文件打包到一起）
所以說你總不可能告訴我你要import "index.html"吧立镶，這明顯不科學啊，所以我們特別特別特別需要這款插件
npm i -D html-webpack-plugin
稍微改動了一下output選項下的js輸出路徑
const path = require("path")
// 命名盡量首字母大寫
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
// 可選的production 對應生成環(huán)境 指定這個東西后面可以有對應的插件進行判斷mode優(yōu)化
// 比如說再production環(huán)境就需要去進行代碼的壓縮啊类早，圖片的合并之類的媚媒，但生產環(huán)境只要打包資源就行了
mode: "development", // 開發(fā)環(huán)境
// 入口文件，webpack打包必須需要的入口文件涩僻，所有的資源都是再入口文件引入然后webpack進行跟蹤資源打包的
// 后面你就懂了
entry:"./src/main.js",
output:{
// 這是一個絕對路徑缭召，所以我們需要使用nodejs自帶的模塊path進行完成了
// 代表打包到dist目錄下
path:path.resolve(__dirname,"dist"),
// 入口文件以及里面引入的所有js代碼都會被打包到一個文件
// 這個字段可以為這個文件取一個名字，你沒寫這個字段我也不知道會發(fā)生些什么
filename:"js/all.js",
// 打包之后的html文件內加載資源的相對路徑
publicPath:"/assets/"
},
// 模塊
module:{
// 規(guī)則
rules:[
{
// 正則表達式匹配entry指定的js文件中使用import或者require引入的文件
// 這里匹配的是引入文件后綴名為.js的文件
test:/\.js$/,
use:{
// 指定要處理的loader
loader:"babel-loader",
// 可以給這個loader傳遞一些參數(shù)
// 在這里就相當于babel.config.js
options:{
presets:["@babel/preset-env"],
plugins:["@babel/plugin-transform-runtime"]
}
},
// 一定要配置這個exclude選項,禁止babel去轉換node_modules模塊下的代碼
// 不然就是一大堆奇奇怪怪的錯誤
exclude:/node_modules/
}
]
},
// 所有插件都必須在plugins中new出來逆日，這是一個數(shù)組
plugins:[
new HtmlWebpackPlugin({
// 指定需要打包的html文件
template:"public/index.html",
// 輸出的文件
filename:"index.html"
})
]
}
然后我們就可以在dist目錄下看見我們的index.html是這樣的了
他就會自動引入所需要的css或者js等文件嵌巷，因為目前還沒有css文件所以就是這種情況，為什么是assets呢室抽，是因為我們在output的publicPath指定的就是這個啊
-
webpack-dev-server配置
既然有了html了搪哪，我們就快速配置一下webpack-dev-server吧，這樣的話能夠熱更新式的刷新頁面了坪圾，在webpack配置文件中新增
然后我們就可以使用npm run dev看看效果了,你就會發(fā)現(xiàn)webpack已經開始使用http協(xié)議進行訪問并且在編輯器里面實時更新代碼瀏覽器也會實時刷新的晓折，這就是體驗了
-
css預處理器loader --> less-loader
關于
less-loader就是用來打包less文件的，我們首先安裝loader和其需要的依賴
npm i -D less-loader less css-loader mini-css-extract-plugin postcss-loader autoprefixer
這里我們需要通過
css-loader將less-loader轉換后的css代碼處理一下兽泄，然后我們通過postcss-loader+autoprefixer給css的一些語法進行加前綴然后我們通過mini-css-extract-plugin插件導出為一個單獨的css文件漓概，同樣的大家也可以使用style-loader給處理之后的css直接加載在對應標簽的style屬性上，但是我覺得還是到處為一個單獨的css文件然后通過上面的html-webpack-plugin引入好一點病梢，這里憑大家的愛好吧
大家一定要仔細看我的注釋了哦胃珍，這次的loader什么的有點多都是用來操作css的，我們先配置出來然后在去寫對應的less文件測試
const path = require("path")
// 到處html文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 導出css樣式插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
// 可選的production 對應生成環(huán)境 指定這個東西后面可以有對應的插件進行判斷mode優(yōu)化
// 比如說再production環(huán)境就需要去進行代碼的壓縮啊蜓陌，圖片的合并之類的觅彰，但生產環(huán)境只要打包資源就行了
mode: "development", // 開發(fā)環(huán)境
// 入口文件，webpack打包必須需要的入口文件护奈，所有的資源都是再入口文件引入然后webpack進行跟蹤資源打包的
// 后面你就懂了
entry: "./src/main.js",
output: {
// 這是一個絕對路徑缔莲，所以我們需要使用nodejs自帶的模塊path進行完成了
// 代表打包到dist目錄下
path: path.resolve(__dirname, "dist"),
// 入口文件以及里面引入的所有js代碼都會被打包到一個文件
// 這個字段可以為這個文件取一個名字，你沒寫這個字段我也不知道會發(fā)生些什么
filename: "js/all.js",
// 打包之后的html文件內加載資源的相對路徑
publicPath: "/assets/"
},
// 模塊
module: {
// 規(guī)則
rules: [
{
test: /\.less$/,
// 需要使用多個loader的時候use可以是一個數(shù)組了
/*
loader默認是從下到上處理對應的文件的
所以這里就是先使用less轉換語法
然后通過postcss-loader給css代碼自動加前綴
然后使用css-loader處理css代碼
最后可以使用style-loader直接加載到對應標簽的style屬性上
我這里使用的是mini-css-extract-plugin到處為一個單獨的css文件
*/
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
// 通過postcss-loader的autoprefixer插件自動給需要兼容的css樣式加前綴
plugins: [require("autoprefixer")]
}
},
"less-loader"
]
},
{
// 正則表達式匹配entry指定的js文件中使用import或者require引入的文件
// 這里匹配的是引入文件后綴名為.js的文件
test: /\.js$/,
use: {
// 指定要處理的loader
loader: "babel-loader",
// 可以給這個loader傳遞一些參數(shù)
// 在這里就相當于babel.config.js
options: {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime"]
}
},
// 一定要配置這個exclude選項,禁止babel去轉換node_modules模塊下的代碼
// 不然就是一大堆奇奇怪怪的錯誤
exclude: /node_modules/
}
]
},
// 所有插件都必須在plugins中new出來
plugins: [
new HtmlWebpackPlugin({
// 指定需要打包的html文件
template: "public/index.html",
// 輸出的文件
filename: "index.html"
}),
new MiniCssExtractPlugin({
// 會將所有的樣式文件也合并到一個霉旗，這里需要指定一下對應樣式文件的名稱
filename: "css/[name].css",
})
],
// 這是webpack-dev-server的配置
devServer: {
// 綁定端口3000
port: 3000,
// 自動打開瀏覽器到指定網頁
open: true,
// 熱更新
hot: true,
// 代表網站根目錄那樣的痴奏，主目錄是哪里
// 這里是dist，所以會自動加載已經打包好的文件
// 直接填你output中的path就行了
contentBase: "dist"
}
}
然后我們可以在src目錄下新建一個less目錄厌秒，隨便寫點什么读拆，這是我的目錄結構
使用npm run build打包出來就是這樣的
關于打包css文件
然后說說當我們使用第三方框架的時候需要導入一些字體文件或者svg等圖標文件是怎么導入的呢？
-
url-loader & file-loader --> 導入字體文件鸵闪，圖片文件
首先我們需要安裝這個loader
npm i -D url-loader file-loader
然后我們需要在rules中添加兩個規(guī)則
{
test:/\.(woff|woff2|ttf|eot|svg)$/,
loader:"url-loader"
},
{
// 忽略大小寫
test:/\.(png|jpe?g|gif)$/i,
use:{
loader:"url-loader",
options:{
// 小于8kb的圖片將被轉換成dataurl格式
limit:8192
}
}
},
-
clean-webpack-plugin
這個插件有什么用呢檐晕？可以在打包之前刪除一些文件，這就非常方便了，我們正好需要在打包之前刪除dist目錄下的所有的文件和目錄然后讓他重新生成出來
npm install --save-dev clean-webpack-plugin
然后我們就需要使用這個插件了辟灰，非常簡單的个榕，最上面引入這個插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
然后直接在plugins中new出來
// 會默認尋找你webpack配置文件中output.path目錄然后清空
new CleanWebpackPlugin()
結束，就是這么easy
那么關于一個項目中需要用到的loader基本上已經介紹完成了芥喇，然后大家可以根據(jù)不同的項目配置不同的loder進行使用西采，比如說react中需要配置jsx語法后綴的loader，vue中需要配置vue后綴的文件loader继控，這里我不是很熟悉react械馆，我放一下vue的webpack自己手動的配置吧
配置vue的開發(fā)環(huán)境需要這三個依賴
npm install -D vue-loader vue-template-compiler vue-style-loader
我這里直接就發(fā)配置完成之后的代碼了
const path = require("path")
// 到處html文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 導出css樣式插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 可選的production 對應生成環(huán)境 指定這個東西后面可以有對應的插件進行判斷mode優(yōu)化
// 比如說再production環(huán)境就需要去進行代碼的壓縮啊，圖片的合并之類的武通，但生產環(huán)境只要打包資源就行了
mode: "development", // 開發(fā)環(huán)境
// 入口文件霹崎，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進行跟蹤資源打包的
// 后面你就懂了
entry: "./src/main.js",
output: {
// 這是一個絕對路徑冶忱，所以我們需要使用nodejs自帶的模塊path進行完成了
// 代表打包到dist目錄下
path: path.resolve(__dirname, "dist"),
// 入口文件以及里面引入的所有js代碼都會被打包到一個文件
// 這個字段可以為這個文件取一個名字尾菇，你沒寫這個字段我也不知道會發(fā)生些什么
filename: "js/all.js",
// 打包之后的html文件內加載資源的相對路徑
// 注釋掉這個惡心的選項
//publicPath: "/assets/"
},
// 模塊
module: {
// 規(guī)則
rules: [
{
test:/\.(woff|woff2|ttf|eot|svg)$/,
loader:"url-loader"
},
{
// 忽略大小寫
test:/\.(png|jpe?g|gif)$/i,
use:{
loader:"url-loader",
options:{
// 小于8kb的圖片將被轉換成dataurl格式
limit:8192
}
}
},
{
test: /\.less$/,
// 需要使用多個loader的時候use可以是一個數(shù)組了
/*
loader默認是從下到上處理對應的文件的
所以這里就是先使用less轉換語法
然后通過postcss-loader給css代碼自動加前綴
然后使用css-loader處理css代碼
最后可以使用style-loader直接加載到對應標簽的style屬性上
我這里使用的是mini-css-extract-plugin到處為一個單獨的css文件
*/
use: [
// 默認vue中的樣式是需要直接由vue-style-loader進行處理的，但是
// 這個loader是直接加上行內的朗和，并不會導出為一個單獨的CSS文件
// 所以這里使用了vue-loader官方文檔提供的一種方法結合MiniCssExtractPlugin的loader
// 到處vue文件中的樣式
process.env.NODE_ENV !== "production"?"vue-style-loader":MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
// 通過postcss-loader的autoprefixer插件自動給需要兼容的css樣式加前綴
plugins: [require("autoprefixer")]
}
},
"less-loader"
]
},
{
test: /\.css$/,
use: [
// 同時這也意味著無法處理js文件中導入的樣式了
process.env.NODE_ENV !== "production"?"vue-style-loader":MiniCssExtractPlugin.loader,
{
loader: "postcss-loader",
options: {
// 通過postcss-loader的autoprefixer插件自動給需要兼容的css樣式加前綴
plugins: [require("autoprefixer")]
}
},
"css-loader"
]
},
{
// 正則表達式匹配entry指定的js文件中使用import或者require引入的文件
// 這里匹配的是引入文件后綴名為.js的文件
test: /\.js$/,
use: {
// 指定要處理的loader
loader: "babel-loader",
// 可以給這個loader傳遞一些參數(shù)
// 在這里就相當于babel.config.js
options: {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime"]
}
},
// 一定要配置這個exclude選項,禁止babel去轉換node_modules模塊下的代碼
// 不然就是一大堆奇奇怪怪的錯誤
exclude: /node_modules/
},
{
// 就這么簡單
// 請看less---> test注釋 --> plugins需要引入一個插件
test:/\.vue$/,
loader:"vue-loader"
}
]
},
// 所有插件都必須在plugins中new出來
plugins: [
new HtmlWebpackPlugin({
// 指定需要打包的html文件
template: "public/index.html",
// 輸出的文件
filename: "index.html"
}),
new MiniCssExtractPlugin({
// 會將所有的樣式文件也合并到一個错沽，這里需要指定一下對應樣式文件的名稱
filename: "css/[name].css",
}),
// 一定要new這個插件
new VueLoaderPlugin()
],
// 這是webpack-dev-server的配置
devServer: {
// 綁定端口3000
port: 3000,
// 自動打開瀏覽器到指定網頁
open: true,
// 熱更新
hot: true,
// 代表網站根目錄那樣的，主目錄是哪里
// 這里是dist眶拉，所以會自動加載已經打包好的文件
// 直接填你output中的path就行了
contentBase: "dist"
}
}
最后我們在進行快速搭建vue進行測試吧
npm i vue
修改main.js
import App from "./App.vue"
import Vue from "vue"
new Vue({
render:h=>h(App)
}).$mount("#app");
給index.html添加一個id為app的div,App.vue如下
<template>
<div>
<span>Hello</span>
<span>Vue</span>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
div{
width: 500px;
height: 300px;
text-align: center;
background-color: yellow;
span{
font-size: 20px;
font-style: italic;
font-weight: bold;
background-color: red;
}
}
</style>
然后最后直接
npm run dev
那么其實webpack中的內容遠不止這些，還有好多比如說一些別名啊憔儿，性能優(yōu)化啊忆植，還有可以設置
webpack-dev-server內置一些API啊，都可以在webpack.config.js中實現(xiàn)谒臼，那么其實呢朝刊，我也只能算帶大家伙的先入門，那么關于以后的修行就看自己了
教程遠沒有結束蜈缤，我還有不定期的更新一些插件啊拾氓，可能也會寫寫其他的配置，記得看最后的時間哦
有沒有啥相對我說的或者交流的或者你對學習前端有困惑什么的底哥，可以聯(lián)系我哈群78484-->5854咙鞍，偷偷告訴你樓主是自學的，并且不會英語哦
