摘要:四配置配置規(guī)則放在的數(shù)組里,每個是一個對象,是正則匹配,匹配文件后綴名,是要用是數(shù)組是所需要的是要加載哪些文件,是忽略掉哪些文件。實(shí)現(xiàn)解析,用會在寫入在文件頂端導(dǎo)入中加入插件。
最近研究webpack略有小成,特此寫篇博客。雖然webpack有官網(wǎng)api,但是個人認(rèn)為webpack api一點(diǎn)都不人性化, 不自己研究研究,根本看不懂。今天先從寫webpack-dev-server開始。webpack-dev-server的作用就是可以在 前端自己起一個服務(wù),不用依托nginx,或者express等,更爽的是它可以實(shí)現(xiàn)實(shí)時更新,不用你去不停的F5刷新瀏 覽器。廢話不多說,下面開始正文:
一、項目目錄結(jié)構(gòu)
webpack build webpack.pro.conf.js src js css img index.html package.json package-lock.json
二、安裝需要的包
npm install webpack wepback-cli webapck-dev-server html-webpack-plugin --save-dev 我這里是"webpack": "^4.16.2" "webpack-cli": "^3.1.0" "webpack-dev-server": "^3.1.5" "html-webpack-plugin": "^3.2.0"
webpack4不僅要裝webpack,還有webpack-cli,webpack-dev-server是我們用來啟動本地服務(wù)的包,html-webpack-plugin
是webpack里的插件,可以自定義我們的首頁,具體后面說。
三、webpack.pro.conf.js文件代碼
var path = require("path"); var webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode:"development", entry:{ app:"./src/js/main.js" }, output:{ filename: "bundle.js", path:path.resolve(__dirname,"../dist"), //path.resolve是nodejs里的方法,具體看nodejs api }, devServer:{ contentBase:false, //我這里沒有設(shè)置contentBase,個人研究contentBase必須指向存在的bundle.js文件所在目錄,因為這里是 //開發(fā)模式,所以dist目錄并不存在,所以用false. host:"localhost", port:"8888", inline:true,//webpack官方推薦 watchOptions: { aggregateTimeout: 2000,//瀏覽器延遲多少秒更新 poll: 1000//每秒檢查一次變動 }, compress:true,//一切服務(wù)都啟用gzip 壓縮 historyApiFallback:true,//找不到頁面默認(rèn)跳index.html hot:true,//啟動熱更新,必須搭配new webpack.HotModuleReplacementPlugin()插件 open:true, }, plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ template:"index.html", title:"index", inject: true }), // new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. // new webpack.NoEmitOnErrorsPlugin() ] } HtmlWebpackPlugin插件template是要采用的模板,模板就是用選擇的html文件,去生成開發(fā)所需的html,這個模板是可以配置的, 比如index.html代碼如下:<%= htmlWebpackPlugin.options.title %> 例如titile的值,取自HtmlWebpackPlugin里的title,更多信息看HtmlWebpackPlugin官網(wǎng)。而且啟動服務(wù)之后,這個插件會幫我們 在head,body中自動引入js,這是通過inject來設(shè)置的。 接下來配置loader,loader是用來解析es6,stylus,less等等,因為這些瀏覽器識別不了,這些loader可以幫我們打包成瀏覽器可識別 的方式。
四、配置loader
module: { rules: [ { test:/.js$/, use:[ "babel-loader" ], include:path.resolve(__dirname,"../src"), exclude:path.resolve(__dirname,"../node_modules") }, { test: /.(png|jpg|gif)$/, use:[ { loader: "url-loader", options: { limit:10000000 } } ] }, { test:/.css$/, use:[ { loader: "style-loader" }, { loader:"css-loader" } ] }, { test:/.styl/, use:[ { loader: "style-loader" }, { loader:"css-loader" }, { loader:"stylus-loader" } ] }, { test:/.vue/, use:[ { loader:"vue-loader" } ] } ] },
配置規(guī)則放在rules的數(shù)組里,每個loader是一個對象,test是正則匹配,匹配loader文件后綴名,use是要用loader是數(shù)組,loader是所
需要的loader,include是要loader加載哪些文件,exclude是忽略掉哪些文件。options可以對插件配置額外參數(shù)。每種文件格式可能需要
多個loader,就需要配置多個loader,而且這些loader是有順序的,從下往上。比如.styl(stylus)文件,先把stylus解析成css,
css文件結(jié)果style-loader插入html中。
實(shí)現(xiàn)vue解析,用vue-loader
npm install vue-loader --save-dev (--save-dev會在package.json devDependencies寫入)
在文件頂端導(dǎo)入const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins中加入new VueLoaderPlugin()插件。
五、 配置resolve
resolve: { extensions: [".js", ".vue", ".json"], alias: { "vue$":"vue/dist/vue.esm.js", "@":path.resolve(__dirname,"../src") } }
extensions可以免去導(dǎo)入文件的后綴,例如: import vue from "vue.js" 改成 import vue from "vue"
alias可重新配置模塊路徑,可以省去很長的寫法。
今天就到這里!互相交流,多多指教!我還會回來的!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/96292.html
摘要:我們發(fā)布了新版本的插件系統(tǒng),以便事件掛鉤和處理程序是單態(tài)的。倒計時按照承諾,我們將從今天開始等待一個月,然后再釋放穩(wěn)定版。這為我們的插件,加載程序和集成生態(tài)系統(tǒng)提供了測試,報告和升級到的時間我們需要您幫助我們升級并測試此測試版。 自8月初以來—當(dāng)我們將 nex branch?合并到webpack/webpack#master—我們看到了巨大的貢獻(xiàn)! showImg(https://se...
摘要:把處理后的配置文件傳遞給服務(wù)器,不過我們在使用它之前,需要把它改造成中間件。因為通過生成的模塊是寫入到內(nèi)存中的,所以我們需要修改開發(fā)環(huán)境中的配置項修改此配置項安裝封裝成中間件。 前言 webpack提供了webpack-dev-server模塊來啟動一個簡單的web服務(wù)器,為了更大的自由度我們可以自己配置一個服務(wù)器,下面介紹如何用koa2來實(shí)現(xiàn)。 wepack-dev-middlewa...
摘要:菜鳥教程框架中文手冊入門目標(biāo)使用搭建通過對數(shù)據(jù)增刪查改沒了純粹占行用的拜 后端API入門學(xué)習(xí)指北 了解一下一下概念. RESTful API標(biāo)準(zhǔn)] 所有的API都遵循[RESTful API標(biāo)準(zhǔn)]. 建議大家都簡單了解一下HTTP協(xié)議和RESTful API相關(guān)資料. 阮一峰:理解RESTful架構(gòu) 阮一峰:RESTful API 設(shè)計指南 RESTful API指南 依賴注入 D...
摘要:菜鳥教程框架中文手冊入門目標(biāo)使用搭建通過對數(shù)據(jù)增刪查改沒了純粹占行用的拜 后端API入門學(xué)習(xí)指北 了解一下一下概念. RESTful API標(biāo)準(zhǔn)] 所有的API都遵循[RESTful API標(biāo)準(zhǔn)]. 建議大家都簡單了解一下HTTP協(xié)議和RESTful API相關(guān)資料. 阮一峰:理解RESTful架構(gòu) 阮一峰:RESTful API 設(shè)計指南 RESTful API指南 依賴注入 D...
摘要:菜鳥教程框架中文手冊入門目標(biāo)使用搭建通過對數(shù)據(jù)增刪查改沒了純粹占行用的拜 后端API入門學(xué)習(xí)指北 了解一下一下概念. RESTful API標(biāo)準(zhǔn)] 所有的API都遵循[RESTful API標(biāo)準(zhǔn)]. 建議大家都簡單了解一下HTTP協(xié)議和RESTful API相關(guān)資料. 阮一峰:理解RESTful架構(gòu) 阮一峰:RESTful API 設(shè)計指南 RESTful API指南 依賴注入 D...
閱讀 3916·2021-11-16 11:44
閱讀 3116·2021-11-12 10:36
閱讀 3373·2021-10-08 10:04
閱讀 1257·2021-09-03 10:29
閱讀 391·2019-08-30 13:50
閱讀 2605·2019-08-29 17:14
閱讀 1735·2019-08-29 15:32
閱讀 1081·2019-08-29 11:27