快捷導(dǎo)航

webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決

更新時(shí)間：2021年09月08日 17:40:58 作者：馬瀟楠

這篇文章主要介紹了webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

首先是配置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 按下回車(chē)時(shí) 就開(kāi)始瘋狂報(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：【依賴安裝到開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境的區(qū)別】

開(kāi)發(fā)環(huán)境，即項(xiàng)目的編碼階段需要的依賴，上線后不需要引用，例如：webpack構(gòu)建工具、babel加載器等，使用 --save-dev 或 -D 命令安裝；

生產(chǎn)環(huán)境，項(xiàng)目上線后開(kāi)始正式提供對(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: