當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack4.x开发环境配置

發(fā)布時(shí)間：2025/3/21 编程问答 10 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack4.x开发环境配置小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、全局安裝webpack

//全局安裝 npm install webpack -g //安裝到你的項(xiàng)目目錄 npm install --save-dev webpack

–save-dev 是你開發(fā)時(shí)候依賴的東西，–save 是你發(fā)布之后還依賴的東西

二、安裝webpack-cli

如果你使用 webpack v4+ 版本，你還需要安裝 webpack-cli或者webpack-command，否則webpack命令運(yùn)行不了。

//卸載本地安裝的webpack-cli npm uninstall webpack-cli //全局安裝webpack-cli npm install -g webpack-cli //在項(xiàng)目中安裝webpack-cli npm install webpack-cli -D //全局安裝webpack-command npm install -g webpack-command //在項(xiàng)目中安裝webpack-command npm install webpack-command -D

三、創(chuàng)建package.json，用于保存關(guān)于項(xiàng)目的信息

定位到自己新建的文件夾webpack1，輸入命令進(jìn)行項(xiàng)目初始化

npm init

輸入這個(gè)命令后，終端會(huì)問你一系列諸如項(xiàng)目名稱，項(xiàng)目描述，作者等信息，不過不用擔(dān)心，如果你不準(zhǔn)備在npm中發(fā)布你的模塊，這些問題的答案都不重要，回車默認(rèn)即可。

四、項(xiàng)目結(jié)構(gòu)

創(chuàng)建如下項(xiàng)目結(jié)構(gòu)

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <div id="root"></div> <script src="./dist/bundle.js"></script> </body> </html> // greeter.js module.exports = function() {var greet = document.createElement('div');greet.textContent = "Hi there and greetings!";return greet; }; //main.js const greeter = require('./Greeter.js'); document.querySelector("#root").appendChild(greeter());

五、使用webpack

1. 通過命令行打包

webpack非全局安裝的情況下，js打包成一個(gè)文件dist/bundel.js
注意window下不能用 node_modules/.bin/webpack src/main.js dist/bundel.js

node_modules\.bin\webpack src\main.js -o dist\bundle.js //或者 node_modules\.bin\webpack src\main.js --output dist\bundle.js

使用命令行打包，可以看出webpack同時(shí)編譯了main.js 和greeter,js,現(xiàn)在打開index.html,可以看到Hi there and greetings!

2.通過配置文件來使用Webpack

新建一個(gè)名為webpack.config.js的文件

module.exports={entry:__dirname+'/src/main.js',//唯一入口文件output:{path:__dirname+'/dist',//打包后的文件存放的地方filename:'bundle.js' //打包后輸出文件的文件名} }

“__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄。
有了這個(gè)配置之后，再打包文件，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)

3.npm配置命令 npm start, npm run {script name}

在package.json中對(duì)scripts對(duì)象進(jìn)行相關(guān)設(shè)置即可

"scripts": {"start": "webpack",},

注：package.json中的script會(huì)安裝一定順序?qū)ふ颐顚?duì)應(yīng)位置，本地的node_modules/.bin路徑就在這個(gè)尋找清單中，所以無論是全局還是局部安裝的Webpack，不需要寫前面指明詳細(xì)的路徑。

npm start是個(gè)特殊命令，其特殊性表現(xiàn)在，在命令行中使用npm start就可以執(zhí)行其對(duì)于的命令。
如果對(duì)應(yīng)的此腳本名稱不是start，想要在命令行中運(yùn)行時(shí)，需要這樣用npm run {script name}如npm run build。

4. webpack –mode 默認(rèn)打包

運(yùn)行

//開發(fā)模式 webpack --mode development //默認(rèn)生產(chǎn)模式 webpack --mode production

在Webpack4.0中，通過mode指定環(huán)境。用于配置運(yùn)行環(huán)境，mode的值可以為development，表示的是開發(fā)模式，或者是production，表示的是生產(chǎn)模式。webpack 會(huì)將 production 作為 mode 的默認(rèn)值去設(shè)置
webpack –mode development或者webpack –mode production，這樣便會(huì)默認(rèn)進(jìn)行打包。

可以在package.json中scripts中加入:

"scripts": {"dev":"webpack --mode development","build":"webpack --mode production"}

根目錄運(yùn)行

npm run dev npm run build

webpack-dev-server的3.1.0版本只支持webpack4

總結(jié)

以上是生活随笔為你收集整理的webpack4.x开发环境配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

环境

上一篇： webpack4.x安装的一些坑
下一篇： webpack4.x Loaders