webpack自動化打包方式詳解
webpack自動化打包
首先下載包
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',//相對路徑 //出口 output: { //__dirname nodejs變量,代表當(dāng)前文件夾目錄,當(dāng)前文件俠士config.js 目錄就是最外層的demo path: path.resolve(__dirname, 'dist'),//絕對路徑 //文件名 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會轉(zhuǎn)換base64,優(yōu)點減少請求數(shù)量,缺點體積變大 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)跟原來一樣并且自動引入打包輸出的資源 template:path.resolve(__dirname,"public/index.html") })], // 開發(fā)服務(wù)器 devServer:{ host:"localhost",//啟動服務(wù)器域名 port:'3000',//端口號 open:true,//是否自動打開瀏覽器 }, //模式 mode: "development" }
主要就是配置devServer這一塊
相當(dāng)于熱啟動
此時的啟動命令是npx webpack server
這個是實時啟動命令, 而不是之前得npx webpack
這個是打包命令
重點生產(chǎn)模式與開發(fā)模式配置
首先在最外面建個config文件夾
里面放兩套配置文件 webpack.dev.js 開發(fā)環(huán)境配置 webpack.prod.js生產(chǎn)環(huán)境配置
注意幾點首先
開發(fā)模式
入口是絕對路徑不需要修改,其余路徑都是相對路徑需要回退到根目錄下因為開發(fā)模式是不執(zhí)行打包的所以輸出路徑可以填undefined,包括下面的clean也可以不填生產(chǎn)模式
入口是絕對路徑不需要修改,其余路徑都是相對路徑需要回退到根目錄下生產(chǎn)模式是不需要內(nèi)置瀏覽器啟動的,也是可以注釋的,模式記得改為production
開發(fā)
生產(chǎn)
然后命令太長這時候我們可以修改node啟動命令
"scripts": { "start":"npm run dev", "dev":"webpack serve --config ./config/webpack.dev.js", "build":"webpack --config ./config/webpack.prod.js" },
公司啟動命令有興趣的朋友可以了解下,大概意思就是做了一個最大內(nèi)存的限制防止文件過大打包出現(xiàn)問題
最后指令生成這個東西理解不是很深 ,有大佬了解也可以評論區(qū)討論
到此這篇關(guān)于webpack自動化打包的文章就介紹到這了,更多相關(guān)webpack自動化打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
將HTML的左右尖括號等轉(zhuǎn)義成實體形式的兩種實現(xiàn)方式
這篇文章主要介紹了將HTML的左右尖括號等轉(zhuǎn)義成實體形式的兩種實現(xiàn)方式,需要的朋友可以參考下2014-05-05使用堆實現(xiàn)Top K算法(JS實現(xiàn))
這篇文章主要介紹了使用堆實現(xiàn)Top K算法,即JS實現(xiàn),文中詳細介紹了Top K算法,感興趣的小伙伴們可以參考一下2015-12-12ES5 ES6中Array對象去除重復(fù)項的方法總結(jié)
這篇文章主要給大家介紹了Array對象去除重復(fù)項的相關(guān)資料,文中通過示例代碼詳細介紹了在ES5和ES6中Array對象去除重復(fù)項的方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-04-04