目錄

• 首先是配置package.on
• 然後安裝webpack工具
• 執行webpack測試
• 4.執行webpack測試
• 配置各種loader(檔案解析器)
• （1）配置入口（entry）
• （2）配置出口（output）
• （3）配置載入器（loader）
• （4）配置外掛（plugin）
• 搭建本地伺服器

今天用webpack手動搭建環境的時候，瘋狂報錯，好大會都進行不了下一步

首先是配置package.json

//自動配置
  npm init -y

一切都沒有任何問題

然後安裝webpack工具

npm install webpack webpack-cli --save-dev
  //或者是npm i webpack webpack-cli -D也可以

執行webpack測試

這一步的時候 我在命令列上敲出webpack 按下回車時 就開始瘋狂報錯

然後最快的方法就是把檔案刪了重新安裝
再來一遍之後還是報錯 相同的錯誤讓人頭蒙

webpack -V 輸出之後 發現連版本號都沒有輸出
後來想了想 是不是 webpack沒有全域性安裝 這個問題 是我覺得最不可能的 因為之前也是用過的

然後重新安裝webpack和webpack-cli 還是之前的指令
然後手動建立src檔案

4.執行webpack測試

CommonJS規範：基於服務端模組化規範，node產出

丟擲：modules.exports
引入：require

ES6 module:

import xxx from ''
export default {}

因為webpack預設只支援js和json檔案的引入 所以如果要在JS中引入其他檔案型別 比如. .png.html等
解析時都需求安裝合適的loader來進行解析處理

配置各種loader(檔案解析器)

安裝babel相關

安裝 babel和react相關載入器

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：【依賴安裝到 開發環境與生www.cppcns.com產環境的區別】

開發環境，即專案的編碼階段需要的依賴，上線後不需要引用，例如：webpack構建工具、babel載入器等，使用 --save-dev 或 -D 命令安裝；

生產環境，專案上線後開始正式提供對外服務的階段仍然需要依賴支援，例如：庫、路由等，使用 --save 或 -S 命令安裝；
在專案的根目錄下建立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:[
            {
    www.cppcns.com            test: /\.css$/,use:['style-loader','css-loader']
            },{
                test: /\.js?$/,// jsx/js檔案的正則
                exclude: /node_modules/,// 排除 node_modules 資料夾
                use:{
                    // loader 是 babel
                    loader: 'babel-loader',options: {
                        // babel 轉義的配置選項
                        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
		})
	]
}

執行打包命令

npx webpack --mode development

配置 npm run build 命令執行打包操作：

//在 package.json 檔案新增 build 項

{
    "scripts": {
        "build": "webpack --mode production"
    }
}

執行打包命令：

npm run build

搭建本地伺服器

安裝依賴

cnpm i webpack-dev-server -D

在webpack.config.js檔案中配置本地服務相關資訊

module.exports = {
          // ...
          devServer: {
              contentBase: './dist',host: 'localhost',port: 3000
          }
      }

在package.json檔案中配置啟動命令

{
    "scripts": {
        "start": "webpack-dev-server --mode development --open"
    }
}

執行啟動服務命令

npm start

然後是一些整合

與整合

vue-loader:解析vue檔案
      vue-template-compiler

      安裝：npm install vue-loader vue-template-compiler -D
      配置webpack檔案： {test:/\.vue$/,use:['vue-loader']},例項化vueLoaderPlugin外掛
      const { VueLoaderPlugin }=require('vue-loader')
      新增外掛例項化：
       },plugins: [
              new VueLoaderPlugin()
          ]

與less整合

安裝：npm install less-loader less -D
配置：
 modulhttp://www.cppcns.come: {
        rules: [
            {test:/\.less$/,'css-loader','less-loader']},]
    },

與sass整合

安裝：npm install sass-loader node-sass -D
配置：
 module: {
        rules: [
            {test:/\.(scss|sass)$/,'sass-loader']},sass常用語法：https://www.cnblogs.com/chyingp/p/sass-basic.html

與vue-router

安裝:npm install vue-router -D

與vuex的整合

安裝:npm install vuex -D

到此這篇關於DytNfmzZjYwebpack搭建vue環境時報錯異常解決的文章就介紹到這了,更多相關webpack搭建vue環境時報錯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！