資訊專欄INFORMATION COLUMN
摘要：不管是還是，其實(shí)都是基于實(shí)現(xiàn)的。文件，看名字就知道它是的配置文件。接下來會(huì)向外暴露可以指定是環(huán)境還是環(huán)境。這個(gè)有點(diǎn)不一樣的是他依賴一個(gè)的配置文件。注意這三個(gè)的順序不能錯(cuò)，是從右往左執(zhí)行的。到這里，一個(gè)小小的腳手架雛形其實(shí)就有了。
不管是vue-cli還是react-sprite，其實(shí)都是基于webpack實(shí)現(xiàn)的。試想，如果沒有腳手架，你自己能搭一個(gè)嗎？看完這篇博客，讓你明白webpak都有些什么東西??webpack其實(shí)沒有那么神奇，就是一個(gè)打包工具，而且它本身只能打包js，而圖片，css，html其實(shí)都是依靠它的loader和plugin完成的。?
webpack.config.js文件，看名字就知道它是webpack的配置文件。該文件一般包括：入口entry，出口output，loader和插件plugin
const path = require("path")
module.exports = {
mode: "development",
entry: "./src/1.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js" },
module: {
rules: [{
test: /.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}]
}}來解析下上面的代碼，
第一行的path其實(shí)是node的核心模塊，webpack其實(shí)就是基于node的產(chǎn)物，你的電腦要是沒有node，你也裝不了webpack的。?
接下來會(huì)向外暴露：?
mode可以指定是development環(huán)境還是production環(huán)境。腳手架沒有這一項(xiàng)，因?yàn)樗呀?jīng)分了dev.conf.js和prod.conf.js。?
entry指定你要打包的入口文件，
output指定你要打包到哪和打包文件的名字。
module模塊一般用來設(shè)置你代碼中要打包的css，圖片之類的loader。
上面就是解析css的loader，肯定有人好奇為什么會(huì)有三個(gè)：?
style-loader：將會(huì)創(chuàng)建style標(biāo)簽，將樣式放到頁面中?
css-loader：將css代碼轉(zhuǎn)成js能接受的字符串?
post-loader：尋找那些需要瀏覽器兼容加前綴的樣式，比如-webkit-，你沒加，但loader會(huì)幫你補(bǔ)全，是不是很省心。這個(gè)loader有點(diǎn)不一樣的是他依賴一個(gè)autoprefixer的配置文件。
這也就能解釋為什么你的項(xiàng)目中引入less，sass之類的擴(kuò)展語言要寫三個(gè)loader。??
注意：這三個(gè)loader的順序不能錯(cuò)，loader是從右往左執(zhí)行的。 接下來的devtool不是必須的，他會(huì)保留代碼編譯前的模樣，方便調(diào)式，上線一定要關(guān)掉，不然會(huì)讓你打包的大小增大很多。?? 自己配置一個(gè)webpack：上面的build里的bundle.js就是打包后生成的文件。webpack.config.js就是上面的代碼，postcss.config.js就是postcss-loader需要的配置文件
//1.js
import "../css/1.css"
console.log(111)//postcss.config.js
const autoprefixer = require("autoprefixer")
module.exports = { plugins: [ autoprefixer ]}//1.css
#div1 {
width: 200px;
height: 200px;
transition: 1s all ease;
background-color: rgb(148, 148, 148);
}
#div1:hover {
transform: rotateY(60deg)
}此時(shí)，在命令行中運(yùn)行webpack，就會(huì)生成上面的build文件夾，打開index.html，你會(huì)發(fā)現(xiàn)，這就是我們自己寫的css和js。這樣就完成了打包，是不是很簡(jiǎn)單？
我們可能還會(huì)好奇webpack為什么能夠起一個(gè)服務(wù)環(huán)境，實(shí)現(xiàn)熱更新等功能，這就不能不說webpack-dev-server了。
實(shí)現(xiàn)熱更新：這個(gè)不需要我們配置，但需要依賴，所以我們要：
npm i webpack webpack-cli webpack-dev-server
注意：這里的啟動(dòng)命令要在package.json文件里配置
{
"scripts": {
"dev": "webpack-dev-server --progress --hot",
},
"devDependencies": {
"autoprefixer": "^9.5.1",
"css-loader": "^2.1.1",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
}}此時(shí)，你在命令行輸入npm run dev，會(huì)發(fā)現(xiàn)你的項(xiàng)目已經(jīng)監(jiān)聽8080端口啦
如果要配置webpack-dev-server，也可以在webpack.config.js中進(jìn)行配置:
devServer:{
hot: true, //設(shè)置熱更新
host: "localhost", //可選，ip
port: 3000, //可選，端口
contentBase:path.resolve(__dirname,"build"), //可選，基本目錄結(jié)構(gòu)
compress: true, //可選，壓縮 proxy: {
"/api": {
target: "http://localhost:8081",
pathRewrite: {"^/api": "/data"}
//本來是反向代理去http://localhost:8081/api，rewrite之后就反向代理去http://localhost:8081/data
}
}}到目前為止，我們生成的index.html文件其實(shí)還是本地文件，那么我們?nèi)绾紊梢粋€(gè)服務(wù)器訪問的html文件呢？這里就要引入html-wepack-plugin插件了。
npm i html-webpack-plugin -S
plugins: [
new HtmlWebpackPlugin({
template: "./build/index.html"
}),
new webpack.HotModuleReplacementPlugin({})
]}這里我把我build文件夾下的index.html。
到這里，一個(gè)小小的腳手架雛形其實(shí)就有了。剩下的就是配置各種各樣的loader啦因?yàn)閘oader的配置都是大同小異，這里就不做過多介紹。
具體可以戳這里www.webpackjs.com/loaders/
附上完整的webpack.config.js
const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
mode: "development", entry: "./src/1.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
module: {
rules: [
{ test: /.css$/, use: ["style-loader", "css-loader", "postcss-loader"] }
]
},
devServer: {
host: "localhost", //可選，ip
port: 3000, //可選，端口
contentBase: path.resolve(__dirname, "build"), //可選，基本目錄結(jié)構(gòu)
compress: true, //可選，壓縮 hot: true },
plugins: [
new HtmlWebpackPlugin({
template: "./build/index.html"
}),
new webpack.HotModuleReplacementPlugin({})
]}文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/7403.html
摘要：打算寫幾篇文章如果能堅(jiān)持的話來總結(jié)下，文章不是教你怎么使用，而是讓你更好的了解你在使用的是怎么去運(yùn)行的，想來想去，第一篇就先介紹下生成的文件，是怎么去執(zhí)行的。 謝謝你們看我扯技術(shù)，最近在對(duì)webpack2進(jìn)行的配置進(jìn)行梳理和學(xué)習(xí)，webpack是在去年使用vue開始接觸的，個(gè)人感覺webpack 融入到編程過程中，提供了模塊化，將各種類型的文件都看成模塊，通過不同的 loader 進(jìn)行...
摘要：剛剛發(fā)布，官網(wǎng)自稱最大的特點(diǎn)就是零配置。本文就詳細(xì)介紹一下實(shí)戰(zhàn)那些事兒。自動(dòng)刷新監(jiān)聽本地源代碼的變化，自動(dòng)重新構(gòu)建刷新瀏覽器。自動(dòng)發(fā)布更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。代碼塊，一個(gè)由多個(gè)模塊組合而成，用于代碼合并與分割。 webpack4.0剛剛發(fā)布，官網(wǎng)自稱4.0最大的特點(diǎn)就是零配置。本文就詳細(xì)介紹一下webpack4.0實(shí)戰(zhàn)那些事兒。 1 什么是WebPack ...
摘要：規(guī)范異步模塊聲明規(guī)范公共模塊聲明模塊化的核心價(jià)值模塊化最核心的價(jià)值在于解決不同文件之間的分工和調(diào)用問題，即依賴關(guān)系。 一、什么是模塊？ 定義：具有相同屬性和行為的事物的集合在前端中：將一些屬性比較類似和行為比較類似的內(nèi)容放在同一個(gè)js文件里面，把這個(gè)js文件稱為模塊目的：為了每個(gè)js文件只關(guān)注與自身有關(guān)的事情，讓每個(gè)js文件各行其職 二、什么是模塊化？CommonJS是什么？AMD和C...
摘要：接觸過的童鞋都知道，組件的模板一般都是在選項(xiàng)內(nèi)定義的，如我是閏土大叔這個(gè)用法都是老生常談了，今天來聊聊的內(nèi)聯(lián)模板。作者閏土大叔鏈接來源著作權(quán)歸作者所有。 showImg(https://segmentfault.com/img/bV1Og9?w=554&h=294); 接觸過vue的童鞋都知道，組件的模板一般都是在template選項(xiàng)內(nèi)定義的，如： 1 Vue.component(ch...
摘要：配置以何種方式導(dǎo)出庫。當(dāng)檢測(cè)文件不再發(fā)生變化，會(huì)先緩存起來，等等待一段時(shí)間后之后再通知監(jiān)聽者，這個(gè)等待時(shí)間通過配置。發(fā)布到線上給用戶使用的運(yùn)行環(huán)境。 一 縮小文件搜索范圍 1 include & exclude 1) action 限制編譯范圍 2) useage module: { rules: [ { test...
閱讀 3158·2021-11-08 13:18
閱讀 2295·2019-08-30 15:55
閱讀 3616·2019-08-30 15:44
閱讀 3079·2019-08-30 13:07
閱讀 2788·2019-08-29 17:20
閱讀 1957·2019-08-29 13:03
閱讀 3422·2019-08-26 10:32
閱讀 3235·2019-08-26 10:15
