資訊專欄INFORMATION COLUMN
摘要：四用于對模塊的源代碼進行轉(zhuǎn)換。對于圖片等都不能識別，所有需要引入對應的對對應格式的文件進行轉(zhuǎn)換以便來識別。支持鏈式調(diào)用，調(diào)用順序由下到上，由右到左五插件目的在于解決無法實現(xiàn)的其他事。
一.entry
entry是webpack打包的入口配置，entry對應的值可以是字符串，數(shù)組，對象；單入口可以使用字符串、數(shù)組、對象，多入口配置則必須使用對象的方式
二.output
output是webpack打包的出口配置，可以指定文件輸出的路徑path和文件名filename；多入口起點的時候，出口文件名配置需要以占位符來確保每個文件具有唯一的名稱，eg：filename="[name].js"
三.mode
模式配置告知webpack使用相應的配置優(yōu)化，支持development，production；webpack打包的時候可以使用webpack --mode=production進行參數(shù)傳遞。
四.loader
loader 用于對模塊的源代碼進行轉(zhuǎn)換。webpack默認只支持js，json文件格式。對于css、es6、圖片、vue、jsx等webpack都不能識別，所有需要引入對應的loader對對應格式的文件進行轉(zhuǎn)換以便webpack來識別。loader支持鏈式調(diào)用，調(diào)用順序由下到上，由右到左
五.plugins
插件目的在于解決 loader 無法實現(xiàn)的其他事。
六.webpack項目搭建（vue）
1）npm i webpack webpack-cli -D安裝webpack依賴。
安裝完了可以對js文件進行解析，但是卻不能解析es6，要解析es6就需要借助babel。
2）npm babel-loader @babel/core @babel/preset-env -D安裝babel對應的依賴。
在目錄下創(chuàng)建.babelrc文件，配置preset
{
"presets": [
"@babel/preset-env"
]
}
配置babel-loader
module: {
rules: [
{
test: /.js$/,
use: "babel-loader"
}
]
}
3)npm i css-loader style-loader less less-loader -D 安裝css對應loader
{
test：/.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /.less$/,
use: [
"style-loader",
"css-loader",
"less-loader",
]
}
這個方式css和js是編譯打包到一個文件里面，css樣式以style的方式插入head中，
但是大多數(shù)情況我們是希望js和css分別獨立打包，這時我們就需要引入插件
mini-css-extract-plugin把css樣式抽離出來。
npm i mini-css-extract-plugin -D安裝插件。
在webpack.config.js引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
loader就不能使用style-loader需引用MiniCssExtractPlugin.loader
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
})
]
npm i optimize-css-assets-webpack-plugin -D引入css壓縮插件
const OptimizeCss = require("optimize-css-assets-webpack-plugin");
配置css壓縮plugins
new OptimizeCss({
assetNameRegExp: /.css$/g,
cssProcessor: require("cssnano"),
}),
4)npm i vue-loader vue-template-compiler -D安裝vue依賴loader
{
test: /.vue$/,
use: "vue-loader"
}
引入vue-loader plugin：
const VueLoaderPlugin = require("vue-loader/lib/plugin");
new VueLoaderPlugin(),
5)npm i html-webpack-plugin -D 安裝html的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html", // 打包之后的html
chunks: ["app"], // 依賴的文件
inject: true,
minify: {
html5: true,
removeAttributeQuotes: true,
collapseWhitespace: true,
}
})
6）熱更新
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104355.html
摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 本人微信公眾號：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學習過webpack。這兩天剛好有時間，學習了下...
摘要：引言最近在學習，發(fā)現(xiàn)好多知識點，之前一點都沒有接觸過，如等等。使用本地安裝，會存于文件夾內(nèi)與屬性內(nèi)，更方便項目文件遷移以及協(xié)同開發(fā)等情況。 引言 最近在學習webpack，發(fā)現(xiàn)好多知識點，之前一點都沒有接觸過，如babel、core-js、browserslist等等。以前習慣了使用cli構(gòu)建項目，很多東西不用考慮，拿來就用，這樣的碼農(nóng)是不會有能力提升的，必須了解更多的知識點，才能成為...
摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設(shè)要做一個多頁面應用，該如何去通過打包。 前言 在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設(shè)要做一個多頁面應用，該如何去通過打包。 前言 在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
摘要：例如現(xiàn)在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎(chǔ)知識。新生成的類似如下入門學習手記因為生成的內(nèi)容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關(guān)注。 最近開始想要維護一個個人的公眾...
閱讀 1185·2021-11-16 11:42
閱讀 2969·2021-10-12 10:18
閱讀 2910·2021-09-24 09:48
閱讀 3530·2019-08-30 15:56
閱讀 1597·2019-08-30 14:17
閱讀 3096·2019-08-29 12:14
閱讀 970·2019-08-27 10:51
閱讀 2083·2019-08-26 13:28
