摘要:進入入口起點后,會找出有哪些模塊和庫是入口起點直接和間接依賴的。用于對模塊的源代碼進行轉(zhuǎn)換。指定生產(chǎn)還是開發(fā)入口文件打包后的文件名這里需指定一個絕對路徑我們需要的模塊去解析路徑包含一系列的規(guī)則是一個具有屬性的對象。
前文:
進擊webpack 4 (基礎(chǔ)篇 一)
webpack 有4大概念
入口(entry)
輸出(output)
loader
插件(plugins)
入口與出口
//webpack.config.js const path = require("path") module.exports = { mode:"development", // 指定生產(chǎn)還是開發(fā) entry:"./src/index.js", // 入口文件 output:{ filename:"bundle.js", // 打包后的文件名 path:path.resolve(__dirname,"./dist") // 這里需指定一個絕對路徑 我們需要node的path模塊去解析路徑 } }
mode: 指定環(huán)境是development還是production 決定了打包出來的文件是壓縮還是未壓縮的
entry: 入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊,來作為構(gòu)建其內(nèi)部依賴圖的開始。進入入口起點后,webpack 會找出有哪些模塊和庫是入口起點(直接和間接)依賴的。 其中分為單入口跟多入口配置 可以是string,array,object
// entry:"./src/index.js" 是下面的簡寫 entry:{ main: "./src/index.js" },
output:包含打包后的名字跟路徑, 如果是多入口應(yīng)用, 可以設(shè)置filename為[name].js, entry里的key值會替換掉name 生成文件夾。
loader
loader 用于對模塊的源代碼進行轉(zhuǎn)換。
const path = require("path") module.exports = { mode:"development", // 指定生產(chǎn)還是開發(fā) entry:"./src/index.js", // 入口文件 output:{ filename:"bundle.js", // 打包后的文件名 path:path.resolve(__dirname,"./dist") // 這里需指定一個絕對路徑 我們需要node的path模塊去解析路徑 }, module: { rules: [] // 包含一系列的規(guī)則 } }
plugin
plugin是一個具有 apply 屬性的 JavaScript 對象。apply 屬性會被 webpack compiler 調(diào)用,并且 compiler 對象可在整個編譯生命周期訪問。
// 代碼省略 module: { rules: [ ] //包含一系列規(guī)則 }, plugins: [ // new PluginName 去生成js對象供給 webpack compiler 調(diào)用 ]
本地開發(fā)配置服務(wù)
yarn add webpack-dev-server -D
本地開發(fā)需要安裝webpack-dev-server 內(nèi)部是基于express 實現(xiàn)的一個服務(wù) ,可讓讓服務(wù)運行在本地,開發(fā)更方便
安裝完畢在dist目錄下新建一個index.html 并且引入打包好后的bundle.js
運行npx webpack-dev-server
并未顯示index.html 需要在webpack-config.js 配置
plugins: [ // new PluginName 去生成js對象供給 webpack compiler 調(diào)用 ], devServer:{ contentBase: "./dist", //當(dāng)前服務(wù)以哪個作為靜態(tài)資源路徑 host:"localhost", // 主機名 默認是localhost port:3000, // 端口配置 open:true, // 是否自動打開網(wǎng)頁 }
重新運行npx webpack-dev-server 自動打開網(wǎng)頁并且能正常顯示頁面
如果覺得npx 麻煩的話,可以在package.json 配置腳本
"scripts": { "dev": "webpack-dev-server --config webpack.config.js" }樣式文件的處理
注意:為了顯示效果,不用每次手動修改html 我們先裝一個html模板插件
yarn add html-webpack-plugin -D
webpack-config.js 配置
const HtmlWebpackPlugin = require("html-webpack-plugin") //.... plugins: [ // new PluginName 去生成js對象供給 webpack compiler 調(diào)用 new HtmlWebpackPlugin({ template:"./index.html", // 作為模板的文件 filename:"index.html" //打包生成后的文件 }) ],
進入正題:
樣式文件分為css,less scss 之類的 需要各種loader 先以css作為 樣例
需要先安裝 style-loader跟css-loader
css的處理
yarn add style-loader css-loader -D
webpack.config.js 配置
// 代碼省略 module: { rules: [ { test:/.css$/, use:["style-loader","css-loader"] } ] },
rules 里放的是一個個規(guī)則對象, test是匹配到的文件 loader是從下往上執(zhí)行, 從右往左執(zhí)行, 也就是說命中css結(jié)尾的文件后 先用css-loader去解析,解析完畢后交由style-loader 插入到html模板里
此處use內(nèi)部 有2種寫法
loader:["style-loader","css-loader"] // 字符串寫法
loader:["style-loader",{loader:"css-loader",options:{}} 對象寫法 在options里可以配置你需求的參數(shù)
less的處理
需要安裝less less-loader
yarn add less less-loader -D
//webpack-config.js module: { rules: [ { test:/.less$/, use:["style-loader","css-loader","less-loader"] } ] },
sass 配置同理
- 給樣式加前綴 如-webkit- 需要安裝autoprefixer, postcss-loader
yarn add postcss-loader autoprefixer -D
根目錄需要新建postcss.config.js
// postcss.config.js module.exports = { plugins: [ require("autoprefixer") ] }
webpack-config.js rules: [ { test: /.less$/, use: [ "style-loader", "css-loader", "less-loader" ] } ]
提取樣式文件
yarn add mini-css-extract-plugin -D
//config.js const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 注意MiniCssExtractPlugin 不能在development環(huán)境中使用 !! //.... mode:"production", // 指定生產(chǎn)還是開發(fā) module: { rules: [ { test: /.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ] } ] }, plugins: [ // new PluginName 去生成js對象供給 webpack compiler 調(diào)用 new HtmlWebpackPlugin({ template:"./index.html", filename:"index.html" }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ] //...
- 壓縮提取出來的樣式文件
需要用到uglifyjs-webpack-plugin,optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
//webpack-config.js module.exports = { //... optimization: { // 優(yōu)化項 這里OptimizeCSSAssetsPlugin 需要UglifyJsPlugin minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true // set to true if you want JS source maps }), new OptimizeCSSAssetsPlugin({}) ] }, }js文件的處理
這里自然輪到我們的babel出場啦 把es6解析為es5 需要這幾個loader
yarn add babel-loader @babel/core @babel/preset-env -D
{ test:/.js/, use:{ loader:"babel-loader", options:{ presets:[ "@babel/preset-env" ] } } },
es7的語法類似
class Parent{ }
這種需要@babel/plugin-proposal-class-properties
yarn add @babel/plugin-proposal-class-properties -D
另外裝飾器方面需要
yarn add @babel/plugin-proposal-decorators -D
{ test:/.js/, use:{ loader:"babel-loader", options:{ presets:[ "@babel/preset-env" ], plugins: [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true }] ] } } },
像一些js內(nèi)置的api 比如生成器 這種需要
yarn add @babel/plugin-transform-runtime -D
exclude:/node_modules // 必須配置 不然會解析到node_modules 里的js //.... plugins: [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true },"@babel/plugin-transform-runtime"] ]
還有一些es7 實例上的某些方法 。字符串的include 這些也要轉(zhuǎn)換
yarn add @babel/polyfill -D
需要添加到entry上或者在入口文件導(dǎo)入
全局變量的引入問題
有時候我們不想在每個模塊都導(dǎo)入某個庫或者插件 只需要這樣配置
plugins: [ // new PluginName 去生成js對象供給 webpack compiler 調(diào)用 new webpack.ProvidePlugin({ // 自動在每個模塊內(nèi)先導(dǎo)入了React React:"react" }), ],靜態(tài)資源的處理
yarn add file-loader url-loader -D
{ test: /.png|jpg|gif$/, use: { loader:"url-loader", options:{ limit:2048 // 小于2k 的會用url-loader轉(zhuǎn)為base64 否則file-loader轉(zhuǎn)為真實img outputPath:"static/image/" //指定輸出目錄 }, } },
預(yù)告: 多頁面配置 跨域 區(qū)分不同環(huán)境 映射
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102072.html
摘要:多頁面配置進擊基礎(chǔ)篇一進擊基礎(chǔ)篇二配置多頁面配置多頁面配置即是多入口需要寫成對象形式,注意數(shù)組形式會變成多入口單頁面,因為打包之后的會合并成一個入口文件出口不能寫同一個文件用代替以上配置并不能多頁面,還需要個模板,并且指明各自的代碼塊去生成 多頁面配置 進擊webpack 4 (基礎(chǔ)篇一) 進擊webpack4 (基礎(chǔ)篇二:配置) ## 多頁面配置 ## 多頁面配置即是多入口 entr...
摘要:進擊基礎(chǔ)篇一進擊基礎(chǔ)篇二配置一進擊基礎(chǔ)篇三配置二不解析不依賴第三方模塊的模塊有一些第三方模塊,它本身不依賴于其他模塊,比如,,不去編譯這些庫,會使得打包更加快速是個正則或者包含正則的數(shù)組不去解析忽略 進擊webpack 4 (基礎(chǔ)篇一)進擊webpack4 (基礎(chǔ)篇二:配置 一)進擊webpack4 (基礎(chǔ)篇三:配置 二) 不解析不依賴第三方模塊的模塊 noParse 有一些第三方模塊...
摘要:主題本文為的基礎(chǔ)部分,旨在如何從搭建一個工程環(huán)境,并簡單介紹打包之后生成什么代碼,并且介紹的常用的各種,的配置跟解決了什么問題本篇為第一篇項目初始化安裝個人比較喜歡用初始化項目完成后再在目錄里新建一個文件用于放我們的源代碼,創(chuàng)建一個作 主題 本文為webpack的基礎(chǔ)部分, 旨在如何從0搭建一個工程環(huán)境,并簡單介紹打包之后生成什么代碼, 并且介紹webpack的常用的各種loader,...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 1049·2021-11-24 09:39
閱讀 3580·2021-11-22 13:54
閱讀 2542·2021-10-11 10:59
閱讀 773·2021-09-02 15:40
閱讀 1025·2019-08-30 15:55
閱讀 1042·2019-08-30 13:57
閱讀 2305·2019-08-30 13:17
閱讀 3025·2019-08-29 18:32