webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決
今天用webpack手動(dòng)搭建環(huán)境的時(shí)候,瘋狂報(bào)錯(cuò),好大會(huì)都進(jìn)行不了下一步
首先是配置package.json
//自動(dòng)配置 npm init -y
一切都沒(méi)有任何問(wèn)題
然后安裝webpack工具
npm install webpack webpack-cli --save-dev //或者是npm i webpack webpack-cli -D也可以
運(yùn)行webpack測(cè)試
這一步的時(shí)候 我在命令行上敲出webpack 按下回車時(shí) 就開始瘋狂報(bào)錯(cuò)
然后最快的方法就是把文件刪了重新安裝
再來(lái)一遍之后還是報(bào)錯(cuò) 相同的錯(cuò)誤讓人頭蒙
webpack -V 輸出之后 發(fā)現(xiàn)連版本號(hào)都沒(méi)有輸出
后來(lái)想了想 是不是 webpack沒(méi)有全局安裝 這個(gè)問(wèn)題 是我覺(jué)得最不可能的 因?yàn)橹耙彩怯眠^(guò)的
然后重新安裝webpack和webpack-cli 還是之前的指令
然后手動(dòng)創(chuàng)建src文件
4.運(yùn)行webpack測(cè)試
CommonJS規(guī)范:基于服務(wù)端模塊化規(guī)范,node產(chǎn)出
拋出:modules.exports 引入:require
ES6 module:
import xxx from '' export default {}
因?yàn)閣ebpack默認(rèn)只支持js和json文件的引入 所以如果要在JS中引入其他文件類型 比如.css .png.html等
解析時(shí)都需求安裝合適的loader來(lái)進(jìn)行解析處理
配置各種loader(文件解析器)
安裝babel相關(guān)
安裝 babel和react相關(guān)加載器
cnpm i babel-loader @babel/core @babel/preset-env -D
安裝css加載器
npm i css-loader style-loader -D cnpm i css-loader style-loader -D
安裝HTML插件
npm i html-webpack-plugin -D cnpm i html-webpack-plugin -D
PS:【依賴安裝到 開發(fā)環(huán)境與生產(chǎn)環(huán)境的區(qū)別】
開發(fā)環(huán)境,即項(xiàng)目的編碼階段需要的依賴,上線后不需要引用,例如:webpack構(gòu)建工具、babel加載器等,使用 --save-dev 或 -D 命令安裝;
生產(chǎn)環(huán)境,項(xiàng)目上線后開始正式提供對(duì)外服務(wù)的階段仍然需要依賴支持,例如:jQuery庫(kù)、路由等,使用 --save 或 -S 命令安裝;
在項(xiàng)目的根目錄下創(chuàng)建webpack.config.js配置文件,依次完成以下配置:
(1)配置入口(entry)
module.exports = { entry:'./src/index.js' }
(2)配置出口(output)
const path = require('path'); module.exports = { // ... output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' } }
(3)配置加載器(loader)
module.exports = { // ... module:{ rules:[ { test: /\.css$/, use:['style-loader','css-loader'] }, { test: /\.js?$/, // jsx/js文件的正則 exclude: /node_modules/, // 排除 node_modules 文件夾 use:{ // loader 是 babel loader: 'babel-loader', options: { // babel 轉(zhuǎn)義的配置選項(xiàng) babelrc: false, presets: [ [require.resolve('@babel/preset-env'), {modules: false}] ], cacheDirectory: true } } } ] } }
(4)配置插件(plugin)
const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins:[ new HtmlWebPackPlugin({ template: 'public/index.html', filename: 'index.html', inject: true }) ] }
執(zhí)行打包命令
npx webpack --mode development
配置 npm run build 命令執(zhí)行打包操作:
//在 package.json 文件添加 build 項(xiàng) { "scripts": { "build": "webpack --mode production" } }
執(zhí)行打包命令:
npm run build
搭建本地服務(wù)器
安裝依賴
cnpm i webpack-dev-server -D
在webpack.config.js文件中配置本地服務(wù)相關(guān)信息
module.exports = { // ... devServer: { contentBase: './dist', host: 'localhost', port: 3000 } }
在package.json文件中配置啟動(dòng)命令
{ "scripts": { "start": "webpack-dev-server --mode development --open" } }
執(zhí)行啟動(dòng)服務(wù)命令
npm start
然后是一些集成
與vue集成
vue-loader:解析vue文件 vue-template-compiler 安裝:npm install vue-loader vue-template-compiler -D 配置webpack文件: {test:/\.vue$/,use:['vue-loader']}, 實(shí)例化vueLoaderPlugin插件 const { VueLoaderPlugin }=require('vue-loader') 添加插件實(shí)例化: }, plugins: [ new VueLoaderPlugin() ]
與less集成
安裝:npm install less-loader less -D 配置: module: { rules: [ {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, ] },
與sass集成
安裝:npm install sass-loader node-sass -D 配置: module: { rules: [ {test:/\.(scss|sass)$/,use:['style-loader','css-loader','sass-loader']}, ] },
sass常用語(yǔ)法:http://www.dbjr.com.cn/article/222337.htm
與vue-router
安裝:npm install vue-router -D
與vuex的集成
安裝:npm install vuex -D
到此這篇關(guān)于webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決的文章就介紹到這了,更多相關(guān)webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vue3中使用vue-qrcode庫(kù)實(shí)現(xiàn)二維碼生成的方法
在Vue3中實(shí)現(xiàn)二維碼生成需要使用第三方庫(kù)來(lái)處理生成二維碼的邏輯,常用的庫(kù)有 qrcode和 vue-qrcode,這篇文章主要介紹了在Vue3中使用vue-qrcode庫(kù)實(shí)現(xiàn)二維碼生成,需要的朋友可以參考下2023-12-12vue填坑之webpack run build 靜態(tài)資源找不到的解決方法
今天小編就為大家分享一篇vue填坑之webpack run build 靜態(tài)資源找不到的解決方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲(chǔ)存數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue返回上一頁(yè)(后退)的幾種方法與區(qū)別說(shuō)明
這篇文章主要介紹了vue返回上一頁(yè)(后退)的幾種方法與區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue中的transition封裝組件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Vue中使用?Aplayer?和?Metingjs?添加音樂(lè)插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂(lè)插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問(wèn)題,現(xiàn)將解決辦法分享出來(lái),需要的朋友可以參考下2023-01-01vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例
今天小編就為大家分享一篇vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09