webpack從零開始第6課:在Vue開發中使用webpack

advance100發表於2017-12-24

原文網址 : https://flycode.co/archives/95526

WebVue

webpack目錄

本文參考文件
vue vuex vue-router vue-loader awesome-vue精彩的vue vue-cli

寫在前面
vue官方已經寫好一個vue-webpack模板vue_cli，原本自己寫一個，發現官方寫得已經夠好了，自己寫顯得有點多餘，但為了讓大家熟悉webpack，決定還是一步一步從0開始寫，但原始檔就直接拷貝官方的

準備工作

新建資料夾D: 3www2018studyvue2017，下面根目錄指的就是這個目錄
生成package.json， 根目錄>cnpm init
安裝webpack和webpack開發伺服器， 根目錄>cnpm i -D webpack webpack-dev-server
安裝vue、vuex、vue-router，根目錄>cnpm i -S vue vuex vue-router
下載vue_cli的webpack模板中src這個原始檔夾到根目錄src中
常用必裝loader, 根目錄>cnpm i -D xxxxx
- eslint-loader + eslint 程式碼規範
- babel-core babel核心
- babel-preset-env
- babel-preset-stage-0
- babel-loader
- less + less-loader或其它css前處理器，如sass+sass-loader
- css-loader 匯入css檔案
- style-loader 將css檔案注入到style標籤中
- postcss-loader
- html-loader
- url-loader + file-loader 處理圖片/音訊視訊/字型，不建議單獨使用file-loader
- vue-loader + css-loader + vue-template-compiler 匯入vue元件
常用必裝plugin,第三方外掛安裝cnpm i -D xxx-webpack-plugin
- html-webpack-plugin
- extract-text-webpack-plugin

webpack和webpack-dev-server配置

// 根目錄>build/webpack.base.conf.js
module.exports = {
const path = require(`path`)
const HtmlWebpackPlugin = require(`html-webpack-plugin`)
const ExtractTextPlugin = require(`extract-text-webpack-plugin`)
module.exports = {
  // 第一部分: 檔案的輸入和輸出
  context: path.resolve(__dirname, `../src`),
  entry: `./main`,
  output: {
    path: path.resolve(__dirname, `../dist`),
    filename: `./app.js` // dist資料夾不存在時，會自動建立
  },
  // 第二部分: 效率方面
  resolve: {
    extensions: [`.js`, `.vue`, `.json`],
    alias: {
      `vue$`: `vue/dist/vue.esm.js`,
      `@`: path.resolve(`src`)
    }
  },
  // 第三部分：處理不同的模組型別,分js+vue|react類，圖片,樣式，音訊視訊，字型幾大塊
  module: {
    rules: [
      // 01----js部分
      // eslint規範程式碼
      // babel實現js相容，以便瀏覽器識別
      // 識別vue元件
      {
        test: /.js$/, // 對js檔案使用eslint來檢查程式碼的規範
        loader: `eslint-loader`,
        enforce: `pre`, // 但為了保險，建議單獨給eslint-loader指定pre值，有關loader的優先順序，參考https://webpack.js.org/configuration/module/#rule-enforce
        include: [path.resolve(`src`)], // 只有些目錄下的js檔案才使用eslint-loader
        options: {}
      },
      {
        test: /.vue$/,
        loader: `vue-loader`,
        options: {}
      },
      // 02----圖片部分
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: `url-loader`,
        options: {
          limit: 10,
          outputPath: `static/`,
          name: `img/[name].[hash:7].[ext]` //最後生成的圖片完整路徑是 output.path+ outputPath+name
        }
      },
      // 03----樣式處理
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: `style-loader`,
          use: `css-loader`
        })
      }
      // 04----音訊視訊

      // 05----字型
    ]
  },
  // 第四部分：外掛，功能很多
  plugins: [
    // 01----生產首頁
    new HtmlWebpackPlugin({
      title: `hello,零和壹線上課堂`, // html5檔案中<title>部分
      filename: `index.html`, // 預設是index.html，伺服器中設定的首頁是index.html，如果這裡改成其它名字，那麼devServer.index改為和它一樣
      // 也是 context+template是最後模板的完整路徑，./不能少
      template: `./index.html`, // 如果覺得外掛預設生成的hmtl5檔案不合要求，可以指定一個模板，模板檔案如果不存在，會報錯，預設是在專案根目錄下找模板檔案，才模板為樣板，將打包的js檔案注入到body結尾處
      inject: `body` // true|body|head|false，四種值，預設為true,true和body相同,是將js注入到body結束標籤前,head將打包的js檔案放在head結束前,false是不注入，這時得要手工在html中加js

    }),
    new ExtractTextPlugin(`styles.css`)
  ],
  // 第五部分: 伺服器的配置
  devServer: {
    contentBase: path.join(__dirname, "../dist"), //網站的根目錄為 根目錄/dist，如果配置不對，會報Cannot GET /錯誤
    port: 9000, //埠改為9000
    open: true
  }
}

}

package.json配置

{
 "name": "vue2017",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
"a": "webpack --config ./build/webpack.base.conf.js",
"b": "webpack-dev-server --config ./build/webpack.base.conf.js",
"test": "echo "Error: no test specified" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
"eslint": "^4.14.0",
"eslint-loader": "^1.9.0",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
 },
 "dependencies": {
"vue": "^2.5.13",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
 }
}

.eslintrc.js配置

// cnpm i -D eslint-plugin-html
// cnpm i -D babel-eslint
// cnpm i -D eslint-config-standard (依賴 eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard)
module.exports = {
  root: true,
  parser: `babel-eslint`, // 預設的解析器為espree,這裡指定為 babel-eslint，參考 https://github.com/babel/babel-eslint
  parserOptions: { // 解析器的選項，預設支援  ECMAScript 5
    sourceType: `module`
  },
  env: {
    browser: true, // 環境定義為瀏覽器
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: `standard`,
  plugins: [ //第3方外掛 eslint-plugin-html，
    `html`
  ],
  rules: {
    `generator-star-spacing`: `off`,
    `no-debugger`: process.env.NODE_ENV === `production` ? `error` : `off`
  }
 }

安裝vue
D: 3www2018studywebpack2018>cnpm i vue -S

如果有下面的報錯

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

解釋: 執行時構建不包含模板編譯器，因此不支援 template 選項，只能用 render 選項，但即使使用執行時構建，在單檔案元件中也依然可以寫模板，因為單檔案元件的模板會在構建時預編譯為 render 函式
修改 D:/03www2018/study/webpack2018/build/webpackfile.js

    resolve: {
        alias: {
            `vue`: `vue/dist/vue.js`
        }
    },

最簡單的例子

D: 3www2018studywebpack2018	odaywanghome.js
import Vue from `vue`;
const app = new Vue({
  template: `<div>hello wolr</div>`
}).$mount(`#main`)

匯入第一個vue元件

// D: 3www2018studywebpack2018	odaywanghome.js
import App from "./app.vue"
import Vue from `vue`;
const app = new Vue({
  template: `<App />`,
  components:{App}
}).$mount(`#main`)

// D: 3www2018studywebpack2018	odaywangApp.vue 
<template>
<div>上午好</div>
</template>

報錯

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

安裝並配置 vue-loader

官方文件 https://vue-loader.vuejs.org/…

D: 3www2018studywebpack2018>cnpm i vue-loader -D

提示要安裝css-loader和vue-template-compiler，現在將這兩個也一起安裝

D: 3www2018studywebpack2018>cnpm i css-loader vue-template-compiler -D

現在就可以正常顯示vue元件

處理css檔案

// D: 3www2018studywebpack2018	odaywangapp.css
body{
    color:#09f;
}

處理單獨的css檔案
沒有裝css-loader會報錯

ERROR in ./today/wang/app.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

安裝和配置

官方文件: https://webpack.js.org/loader…

D: 3www2018studywebpack2018>cnpm i -D css-loader

{
    test: /.css$/,
    loader: `css-loader`, 
},

對上面匯入的css一般有兩種處理，一是使用style-loader將css嵌入到html檔案的style標籤中，一種是單獨存在一個檔案中

style-loader

官方文件: https://webpack.js.org/loader…

D: 3www2018studywebpack2018>cnpm i style-loader -D

{
    test: /.css$/,
    loader: `style-loader!css-loader`, 
},

多個loader是從右到左執行，多個loader之間用!連線，上面多個loader也可以寫在陣列的形式

{
    test: /.css$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" }
    ]
}

這種寫法是，從下到上執行，先執行css-loader再執行style-loader

將css檔案單獨打包到一個檔案
這要使用到ExtractTextWebpackPlugin外掛

處理less/sass等檔案

這要用到less-loader或sass-loader，同時得安裝less或sass，如果沒安裝會報錯

 [Vue warn]: Error in beforeCreate hook: "Error: Cannot find module "!!vue-loader/node_modules/vue-style-loader!css-loader!../../node_modules/_vue-loader@13.6.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-381730fa","scoped":false,"hasInlineConfig":false}!less-loader!../../node_modules/_vue-loader@13.6.0@vue-loader/lib/selector?type=styles&index=0&bustCache!./app.vue""

ave元件的內容

<template>
    <div class=`morning`>上午好</div>
</template>
<style lang=`less`>
    @color:#f96;
    .morning{
        color:@color
    }
</style>

安裝less和less-loader

D: 3www2018studywebpack2018>cnpm i -D less less-loader

配置

{
    test: /.css$/,
    use: ExtractTextPlugin.extract({
    // fallback: "style-loader", //備用，如果提取不成功時，會使用style-loader來處理css
    use: "css-loader"
    })
    /*use: [
    { loader: "style-loader" },
    { loader: "css-loader" }
    ]*/
}, 

{
    test: /.less$/,
    use: [
         {
             loader: "style-loader" // creates style nodes from JS strings
         },
        {
        loader: "css-loader" // translates CSS into CommonJS
        },
        {
        loader: "less-loader" // compiles Less to CSS
        }
    ]
},

上面這個例子，只有匯入的css檔案單單獨存在一個檔案中，vue元件中的less歸到了style中了，

說明：在vue元件<style>中，如果lang=”less”，在vue-loader中預設配置好了less，無須另外配置
說明: 上面例子是配置的是單獨的less檔案，不適合uve中的less
說明：如何將vue中的less也放到單獨的css檔案中呢? 參考https://vue-loader.vuejs.org/…

{
    test: /.vue$/,
    loader: `vue-loader`,
    options: {
        extractCSS: true
    }
}

但上面有個缺點，會覆蓋之前css中的配置中生成style.css檔案，如何解決呢?

const path = require(`path`);
const webpack = require(`webpack`)
const UglifyJsPlugin = require(`uglifyjs-webpack-plugin`)
const HtmlWebpackPlugin = require(`html-webpack-plugin`);
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new ExtractTextPlugin(`css/[name]-one.css`);
const extractLESS = new ExtractTextPlugin(`css/[name]-two.css`);

module.exports={    
    plugins: [
        extractCSS,
        extractLESS
    ],
    
    module: {
        rules: [
            
             {
                test: /.css$/,
                use: extractCSS.extract({
                 // fallback: "style-loader", //備用，如果提取不成功時，會使用style-loader來處理css
                 use: "css-loader"
                })
        
            }, 

              {
                  test: /.vue$/,
                  loader: `vue-loader`,
                  options: {
                     // extractCSS: true
                     extractCSS: function(){
                         return extractLESS
                     }
                    }
                }
        ]
    },  
}

匯入圖片

// D: 3www2018studywebpack2018	odaywangApp.vue中增加圖片
<template>
    <div class=`morning`>
    <img src="../images/logo.jpg" />
    <img src="../images/a.jpg" />
    上午好
    </div>
</template>
<style lang=`less`>
    @color:#f96;
    .morning{
        color:@color
    }
</style>

如果安裝並配置好了url-loader，圖片會生成data:image格式
發現生成<img src="data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIzNDk0NWM0MDMyMWQyMDk3YTY5Zjg2MGZkNWQ1M2FlZC5qcGciOw==">，但是不顯示出圖片，url-loader不配置會顯示圖片，顯示如下<img src=”34945c40321d2097a69f860fd5d53aed.jpg”>

安裝
D:03www2018studywebpack2018>cnpm i url-loader -D

安裝
D:03www2018studywebpack2018>cnpm i file-loader -D

從零開始使用 Webpack 搭建 Vue3 開發環境
2020-07-09
WebVue開發環境
從零開始開發一個 Webpack
2018-07-12
Web
從零開始--webpack 4 配置
2019-04-08
Web
從零開始搭建webpack應用
2018-03-25
Web
從零開始搭建webpack+react開發環境
2018-05-08
WebReact開發環境
Re:用webpack從零開始的vue-cli搭建'生活'
2022-07-16
WebVue
從零開始使用 webpack5 搭建 react 專案
2021-02-28
WebReact
從零開始搭建一個 Webpack 開發環境配置（附 Demo）
2019-01-30
Web開發環境
從零開始構建一個vue專案 --- webpack歷險記
2019-04-01
VueWeb
從零開始構建一個webpack專案
2019-10-24
Web
從零開始配置webpack(基於webpack 4 和 babel 7版本)
2019-03-22
WebBabel
webpack 從開始到結束
2018-11-16
Web
?從零開始學習webpack系列二（配置檔案）
2020-04-06
Web
從零開始使用webpack 4, Babel 7建立一個React專案
2018-11-18
WebBabelReact
?從零開始學習webpack系列五（解析打包樣式）
2020-04-06
Web
從0開始學習Webpack（一）
2019-02-17
Web
「基礎搭建」從零開始，基於 Webpack5 搭建一個 Vue-Cli
2022-03-16
WebVue
用webpack4從零開始構建react腳手架
2021-09-09
WebReact
Webpack 5 配置手冊（從0開始）
2021-03-27
Web
webpack從零開始搭建多頁面（一）:webpack起步到執行一個簡單的demo
2019-02-16
Web
從零開始到釋出上線，如何自定義一個webpack loader
2018-05-16
Web
從零開始學Python：19課-使用PyCharm開發Python應用程式
2020-07-28
PythonPyCharm
從零開始學Python：第22課-Python標準庫初探
2020-08-13
Python
從頭開始-手把手用webpack4搭建vue/react環境
2019-03-06
WebVueReact
VUE從零開始環境搭建
2020-10-29
Vue
在webpack配置Vue
2020-10-05
WebVue
如何使用 Webpack 5 + Babel 從頭開始建立 React 應用程式 - DevDojo
2021-08-30
WebBabelReactdev
從零開始學Python：20課-函式使用進階
2020-07-30
Python函式
從零開始：一個正式的vue+webpack專案的目錄結構是怎麼形成的
2018-04-11
VueWeb
從零搭建前端開發環境----React+Ts+Webpack基礎搭建
2023-03-11
前端開發環境ReactWeb
使用Webpack配置React和Vue開發環境【超實用】
2020-04-03
WebReactVue開發環境
使用webpack搭建react開發環境
2018-05-14
WebReact開發環境
webpack 流程解析(4): 開始構建
2021-10-18
Web
使用VS Code從零開始開發除錯.NET 5
2021-04-18
除錯
從零開始
2019-02-05
如何開發webpack loader
2019-01-28
Web
YYDS: Webpack Plugin開發
2021-01-19
WebPlugin
不怕從零開始，只怕從未開始！
2018-07-21
從零開始，開發一個 Web Office 套件（6）：游標 & Click 事件
2022-03-04
Web套件事件

webpack從零開始第6課:在Vue開發中使用webpack

匯入第一個vue元件

處理css檔案

處理less/sass等檔案

相關文章