用vue-cli1/2搭建一個(gè)vue項(xiàng)目時(shí)，可以看到有很多關(guān)于webpack配置的文件。我們不需要知道那些繁瑣的配置文件有什么作用，只需在控制臺(tái)輸入npm run dev，項(xiàng)目自動(dòng)啟動(dòng)，我們就可以愉快的寫業(yè)務(wù)代碼了。

雖然vue-cli幫我們做好了一切，我們就能不用學(xué)webpack了嗎？NoNoNo...現(xiàn)代前端工程師必備的技能就是模塊化構(gòu)建打包項(xiàng)目，不信去那些招聘網(wǎng)站的前端JD看看。廢話不多說，下面讓我們用webpack構(gòu)建一個(gè)簡單的vue-cli。

?

第一步：安裝NodeJS（webpack基于NodeJS）

下載地址：http://nodejs.cn/download/，傻瓜式安裝，一直下一步就ok。安裝完畢，在控制臺(tái)輸入node -v檢查是否按照成功。

NodeJS是JavaScript的運(yùn)行環(huán)境，像瀏覽器一樣。安裝之后可以通過node命令運(yùn)行JavaScript代碼，比如：node a.js

npm（node package manage of JavaScript）作用：Node.js下載后自帶npm，類似于迅雷下載資源，可以下載項(xiàng)目所需的依賴模塊/包。

允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。

允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。

允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用。

npm是國外的，可能會(huì)比較慢，建議安裝cnpm，安裝方法：npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：npm init初始化生成package.json

首先建立一個(gè)空的項(xiàng)目文件夾，

進(jìn)入文件夾，shift+右擊，出現(xiàn)【在此處打開命令窗口(W)】，

點(diǎn)擊進(jìn)入cmd控制臺(tái)，命令路徑即為當(dāng)前文件夾目錄，

然后輸入npm init -y，回車，之后會(huì)在根目錄創(chuàng)建一個(gè)package.json。

package.json用來存放整個(gè)項(xiàng)目的依賴模塊/包，當(dāng)我們把整個(gè)項(xiàng)目遷移到別的地方使用時(shí)，項(xiàng)目運(yùn)行時(shí)會(huì)根據(jù)package.json的依賴參數(shù)自動(dòng)下載所需模塊/包。

第三步：安裝webpack

命令：npm install webpack@3.12.0 --save-dev

測試webpack在本地是否可用，webpack -v如果出現(xiàn)webpack為無效命令，則使用全局安裝webpack：npm install webpack@3.12.0 -g。安裝成功后就可以使用webpack命令玩耍了。

建議安裝wepack3，webpack4對(duì)vue-cli的兼容還不是很好

webpack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類似編譯，組合，壓縮等任務(wù)的具體步驟，工具之后可以自動(dòng)替你完成這些任務(wù)。

第四步：webpack打包模塊

很多文件類型，比如vue、css、img、字體...需要我們配置相應(yīng)的loader才能完成正確解析并打包。

比如，把css打包到j(luò)s文件中，需要安裝css加載器，安裝命令：npm install --save-dev style-loader css-loader
css-loader?和?style-loader，二者處理的任務(wù)不同
css-loader使你能夠使用類似@import 和 url(...)的方法實(shí)現(xiàn)?require()的功能
style-loader將所有的計(jì)算后的樣式用<style></style>加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中?

命令行打包（不推薦）：

webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自動(dòng)創(chuàng)建dist目錄

這種打包方式，在js文件中引入css文件時(shí)要注明loader：require('style-loader!css-loader!../css/index.css')?注意順序不能錯(cuò)！?

配置文件打包（推薦）：
需要在項(xiàng)目的根目錄創(chuàng)建webpack.config.js.項(xiàng)目里配置如下：

module.exports = {entry: __dirname + "/src/main.js",// 入口文件，可以多個(gè) output: { path: __dirname + "/dist", // 絕對(duì)路徑，打包后的文件存放的文件夾 filename: "build.js" // 相對(duì)路徑，打包后輸出的文件 }, 　 // 1. 不同webpack版本配置loader的方式不同，webpack3用loaders，webpack4用rules // 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就可以寫成 require('../css/index.css') 　module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(jpg|png|jpeg|svg)$/, loader: 'url-loader', options: { // 大于10000字節(jié)會(huì)被打包成重命名的圖片資源，否則打包成base64 limit: 10000 // name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['env'], // 處理關(guān)鍵字，es6/7/8/9...都能轉(zhuǎn)化 plugins: ['transform-runtime'] // 處理函數(shù) } } ] } }

package.json中配置scripts:{"build": 'webpack'}（webpack命令會(huì)默認(rèn)運(yùn)行webpack.config.js文件），執(zhí)行npm run build即可打包

第五步：搭建webpack服務(wù)器

上面4步就可以完成項(xiàng)目的打包任務(wù)，但是開發(fā)環(huán)境還需要更進(jìn)一步配置。

webpack-dev-server可以像php/java/.net...一樣搭建為我們搭建一個(gè)服務(wù)器，這樣就可以熱更新項(xiàng)目代碼，實(shí)現(xiàn)實(shí)時(shí)運(yùn)行項(xiàng)目，進(jìn)而方便我們調(diào)試項(xiàng)目。

安裝：?npm install webpack-dev-server -g

寫入到依賴：?npm install webpack-dev-server --save-dev

配置命令：scripts:{"dev": 'webpack-dev-server --hot --inline'}?// 實(shí)現(xiàn)熱更新和在線編譯

運(yùn)行命令：npm run dev

輸入localhost:8080/運(yùn)行... // webpack-dev-server的默認(rèn)端口是8080

具體代碼見：https://github.com/tzy13755126023/webpack-vue-cli

最后，webpack版本更新很頻繁，各種npm包也更新很頻繁，這就會(huì)導(dǎo)致一個(gè)兼容問題，動(dòng)不動(dòng)就報(bào)錯(cuò)，這點(diǎn)很讓人頭疼，很容易會(huì)導(dǎo)致從入門到放棄。

轉(zhuǎn)載于:https://www.cnblogs.com/tzy1997/p/10963304.html

總結(jié)

以上是生活随笔為你收集整理的webpack入门——构建简易版vue-cli的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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