webpack自動(dòng)化打包方式詳解
webpack自動(dòng)化打包
首先下載包
npm i webpack-dev-server -D
配置
webpack.config.js
const path = require('path')//nodejs核心模塊,專門用來處理路徑問題 const ESLintPlugin = require('eslint-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //入口 entry: './src/main.js',//相對(duì)路徑 //出口 output: { //__dirname nodejs變量,代表當(dāng)前文件夾目錄,當(dāng)前文件俠士config.js 目錄就是最外層的demo path: path.resolve(__dirname, 'dist'),//絕對(duì)路徑 //文件名 filename: './static/index.js', clean: true }, //加載器 module: { //規(guī)則 // loader的配置 rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, { test: /\.(png|jpe?g|gif|webp|svg)$/, type: 'asset',//設(shè)置資源 generator: { filename: "static/[hash][ext][query]",//打包文件名 }, parser: { dataUrlCondition: { // 小于10kb會(huì)轉(zhuǎn)換base64,優(yōu)點(diǎn)減少請(qǐng)求數(shù)量,缺點(diǎn)體積變大 maxSize: 10 * 1024 } } }, { test: /\.js$/, exclude: /node_modules/,//排除node_modules不處理 use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, //插件 plugins: [ new ESLintPlugin({ context: path.resolve(__dirname, "src") }), new HtmlWebpackPlugin({ //模板,以public/index.html文件創(chuàng)建新的html文件 //心得html結(jié)構(gòu)跟原來一樣并且自動(dòng)引入打包輸出的資源 template:path.resolve(__dirname,"public/index.html") })], // 開發(fā)服務(wù)器 devServer:{ host:"localhost",//啟動(dòng)服務(wù)器域名 port:'3000',//端口號(hào) open:true,//是否自動(dòng)打開瀏覽器 }, //模式 mode: "development" }
主要就是配置devServer這一塊
相當(dāng)于熱啟動(dòng)
此時(shí)的啟動(dòng)命令是npx webpack server
這個(gè)是實(shí)時(shí)啟動(dòng)命令, 而不是之前得npx webpack
這個(gè)是打包命令
重點(diǎn)生產(chǎn)模式與開發(fā)模式配置
首先在最外面建個(gè)config文件夾
里面放兩套配置文件 webpack.dev.js 開發(fā)環(huán)境配置 webpack.prod.js生產(chǎn)環(huán)境配置
注意幾點(diǎn)首先
開發(fā)模式
入口是絕對(duì)路徑不需要修改,其余路徑都是相對(duì)路徑需要回退到根目錄下因?yàn)殚_發(fā)模式是不執(zhí)行打包的所以輸出路徑可以填undefined,包括下面的clean也可以不填生產(chǎn)模式
入口是絕對(duì)路徑不需要修改,其余路徑都是相對(duì)路徑需要回退到根目錄下生產(chǎn)模式是不需要內(nèi)置瀏覽器啟動(dòng)的,也是可以注釋的,模式記得改為production
開發(fā)
生產(chǎn)
然后命令太長這時(shí)候我們可以修改node啟動(dòng)命令
"scripts": { "start":"npm run dev", "dev":"webpack serve --config ./config/webpack.dev.js", "build":"webpack --config ./config/webpack.prod.js" },
公司啟動(dòng)命令有興趣的朋友可以了解下,大概意思就是做了一個(gè)最大內(nèi)存的限制防止文件過大打包出現(xiàn)問題
最后指令生成這個(gè)東西理解不是很深 ,有大佬了解也可以評(píng)論區(qū)討論
到此這篇關(guān)于webpack自動(dòng)化打包的文章就介紹到這了,更多相關(guān)webpack自動(dòng)化打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)的在本地預(yù)覽圖片功能示例
這篇文章主要介紹了js實(shí)現(xiàn)的在本地預(yù)覽圖片功能,結(jié)合實(shí)例形式分析了JavaScript兼容移動(dòng)web與IE瀏覽器的圖片預(yù)覽功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11將HTML的左右尖括號(hào)等轉(zhuǎn)義成實(shí)體形式的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了將HTML的左右尖括號(hào)等轉(zhuǎn)義成實(shí)體形式的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2014-05-05使用堆實(shí)現(xiàn)Top K算法(JS實(shí)現(xiàn))
這篇文章主要介紹了使用堆實(shí)現(xiàn)Top K算法,即JS實(shí)現(xiàn),文中詳細(xì)介紹了Top K算法,感興趣的小伙伴們可以參考一下2015-12-12js實(shí)現(xiàn)具有高亮顯示效果的多級(jí)菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)具有高亮顯示效果的多級(jí)菜單,涉及javascript針對(duì)cookie的調(diào)用及頁面元素樣式的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09ES5 ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法總結(jié)
這篇文章主要給大家介紹了Array對(duì)象去除重復(fù)項(xiàng)的相關(guān)資料,文中通過示例代碼詳細(xì)介紹了在ES5和ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-04-04