Webpack4 從零搭建 Vue 項目

Miracle_lihb 發(fā)布于2019-08-26 10:35 / 3107人閱讀

摘要：更改文件配置輸入命令下載配置中的如果要打包或者其它，再安裝對應的。

作者：NCUHOME-FED   Flura的博客
已經獲得原作者授權

主要設置 創(chuàng)建項目

新建一個項目文件夾

npm init -y 初始化 package.json

安裝 webpack 依賴包

npm install --save-dev webpack webpack-cli webpack-dev-server

  devServer: {
    contentBase: path.join(__dirname, "./dist"),
    host: "localhost",  //  可以設置0.0.0.0 ,這樣設置你可以通過127.0.0.1或則localhost去訪問
    open: true,       //  項目啟動時,會默認幫你打開瀏覽器
    port: 8088,
    // hot: true    //在單頁面應用開發(fā)中,我們修改了代碼后是整個頁面都刷新,開啟hot后,將只刷新對應的組件
  }

安裝 Vue

npm install vue

npm install -D vue-loader vue-template-compiler

vue-loader webpack配置參考官方文檔-手動設置

 // webpack.base.config.js
      const VueLoaderPlugin = require("vue-loader/lib/plugin")

  module.exports = {
  module: {
      rules: [
      // ... 其它規(guī)則
      {
          test: /.vue$/,
          loader: "vue-loader"
      }
      ]
  },
  plugins: [
      // 請確保引入這個插件！
      new VueLoaderPlugin()
  ]
 }

config詳細配置

新建一個src文件夾，并在src文件下新建index.js，在根目錄下新建webpack.config.js

webpack.config.js的配置

? webpack.config.js 配置，webpack-dev-server工具的使用。

html-webpack-plugin 可以指定template模板文件，將會在output目錄下，生成html文件，并引入打包后的js.

安裝依賴:

npm install --save-dev html-webpack-plugin

配置webpack.config.js module中的rules

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    //...other code
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src/index.html")
        })
    ]

}

const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "/dist"),//打包生成文件地址    
    filename: "bundle.js",
    // publicPath: "/dist/"http://文件輸出的公共路徑
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        exclude: /node_modules/,
        use: [
          "vue-loader"
        ]
      },
      {
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /.js?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/react"],
              plugins: [
                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
              ]
            }
          }
        ],
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./index.html"
    }),
    new VueLoaderPlugin()  // vueLoader插件 允許你以一種名為單文件組件的格式撰寫 Vue 組件
  ],
  devServer: {
    contentBase: path.join(__dirname, "./dist"),
    host: "localhost",  //  可以設置0.0.0.0 ,這樣設置你可以通過127.0.0.1或則localhost去訪問
    open: true,       //  項目啟動時,會默認幫你打開瀏覽器
    port: 8088,
    // hot: true    //在單頁面應用開發(fā)中,我們修改了代碼后是整個頁面都刷新,開啟hot后,將只刷新對應的組件
  }
}

創(chuàng)建項目目錄文件

在根目錄下創(chuàng)建一個index.html文件作為啟動頁面，一個webpack.config.js作為webpack配置文件(實際項目中這里會有webpack配置文件，分別用于開發(fā)環(huán)境和生產環(huán)境，這里簡便起見就用一個配置文件) ,再創(chuàng)建一個App.vue文件。

cet-query
├─ index.html 啟動頁面
├─ package-lock.json
├─ package.json 包管理
├─ src
│    └─ index.js 入口文件
|     └─ App.vue 
└─ webpack.config.js  webpack配置文件

index.html




  
  
  
  cet-query title

index.js

import Vue from "vue"
import App from "./App.vue"

const root = document.createElement("div") //創(chuàng)建div節(jié)點
document.body.appendChild(root) //將div節(jié)點添加到body下

new Vue({
  render: (h) => h(App)  //vue在創(chuàng)建Vue實例時,通過調用render方法來渲染實例的DOM樹,也就是這個組件渲染的是App的內容
                        //vue在調用render方法時,會傳入一個createElement函數作為參數,也就是這里的h的實參是createElement函數,然后createElement會以App為參數進行調用
}).$mount(root)

App.vue

添加啟動腳本

在package.json添加啟動腳本命令

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --mode=development --progress --hide-modules",
    "dev": "webpack-dev-server --mode=development"
  },

這樣執(zhí)行npm run dev就能啟動成功了， npm run build也能打包生成dist文件

其它擴展處理 引入babel-loader兼容代碼

babel-preset-env 幫助我們配置 babel。我們只需要告訴它我們要兼容的情況（目標運行環(huán)境），它就會自動把代碼轉換為兼容對應環(huán)境的代碼。ES6/ES7/JSX 轉義需要 Babel 的依賴，支持裝飾器。

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread

更改webpack.config.js文件

{
  test: /.js?$/,
  use: [
    {
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env", "@babel/react"],
        plugins: [
          [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
        ]
      }
    }
  ],
  include: path.resolve(__dirname, "src"),
  exclude: /node_modules/
},

配置css

輸入命令下載style-loader css-loader

npm i style-loader css-loader -D

配置webpack.config.js module中的rules

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

如果要打包scss或者其它，再安裝對應的loader。

支持sass

輸入命令下載sass-loader node-sass

npm i sass-loader node-sass -D
復制代碼

修改webpack.config.js的css

{   
  test: /.sass$/,   
  use:["vue-style-loader", 
     "css-loader", "sass-loader" 
  ],   
  include: path.resolve(__dirname + "/src/"),    
  exclude: /node_modules/ 
},

支持圖片

輸入命令下載file-loader url-loader

npm i file-loader url-loader -D

配置webpack.config.js module中的rules

{   
  test: /.(jpg|png|gif|svg)$/,   
  use: "url-loader",   
  include: path.resolve(__dirname + "/src/"),   
  exclude: /node_modules/ 
}

完整的文件參考 webpack.config.js文件

const path = require("path")  //path是Nodejs中的基本包,用來處理路徑
const htmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "/dist"),  //打包生成文件地址    
    filename: "bundle.js",
    // publicPath: "/dist/"  //文件輸出的公共路徑
  },
  module: {  
    rules: [     //針對不同類型的文件,我們定義不同的識別規(guī)則,最終目的都是打包成js文件
      {
        test: /.vue$/,
        exclude: /node_modules/,
        use: [
          "vue-loader"     //處理.vue文件
        ]
      },
      {
        test: /.css$/,     //處理css
        exclude: /node_modules/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /.js?$/,    //處理js
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/react"],
              plugins: [
                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
              ]
            }
          }
        ],
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/
      },
      {
        test: /.(png|gif|jpg|jpeg|svg)$/,     //處理圖片
        exclude: /node_modules/,
        use: [
          "url-loader"
        ]
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./index.html"
    }),
    new VueLoaderPlugin()  // vueLoader插件 允許你以一種名為單文件組件的格式撰寫 Vue 組件
  ],
  devServer: {
    contentBase: path.join(__dirname, "./dist"),
    host: "localhost",  //  可以設置0.0.0.0 ,這樣設置你可以通過127.0.0.1或則localhost去訪問
    open: true,       //  項目啟動時,會默認幫你打開瀏覽器
    port: 8088,
    // hot: true         //在單頁面應用開發(fā)中,我們修改了代碼后是整個頁面都刷新,開啟hot后,將只刷新對應的組件
  }
}

package.json文件

{
  "name": "cet-query",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --mode=development --progress --hide-modules",
    "dev": "webpack-dev-server --mode=development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fuchengjx/cet-query.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/fuchengjx/cet-query/issues"
  },
  "homepage": "https://github.com/fuchengjx/cet-query#readme",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

GPU云服務器云服務器云服務器搭建vue項目阿里云服務器搭建vue項目從零搭建云服務器騰訊云服務器部署vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/106418.html

為什么我不推薦你使用vue-cli創(chuàng)建腳手架？

摘要：后來經過排查你會發(fā)現是由于目前還沒有版本?？梢允褂迷摲绞浇鉀Q。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進階中級的初級前端人員。最近在知乎看到一個問題，原問題如下：很奇怪，為什么現在能找到自己手動創(chuàng)建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現在一般的做...

trigkit4 2019-08-22 16:09 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
webpack4 的開發(fā)環(huán)境配置說明

摘要：的開發(fā)環(huán)境配置說明完整的的配置地址開發(fā)環(huán)境的搭建，總體而言就比較輕松，因為用戶就是開發(fā)者們。的做法是在的字段配置類似這樣這樣配置后，當運行時，在里通過可以取到值以來做判斷就可以啦。 webpack4 的開發(fā)環(huán)境配置說明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 開發(fā)環(huán)境的搭建，總體而言就比較輕松，因為用戶就是開發(fā)者們...

fancyLuo 2019-08-23 10:34 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

Miracle_lihb

男|高級講師

我要關注我要私信

TA的文章

css整理

閱讀 2091·2019-08-30 15:53
網址收集

閱讀 3083·2019-08-30 15:44
Array、Set、Map、Object學習總結

閱讀 2941·2019-08-30 14:11
代碼質量管理——如何寫出優(yōu)雅地代碼

閱讀 2935·2019-08-30 14:01
position fixed的相對容器是什么

閱讀 2726·2019-08-29 15:16
webpack + PostCSS + cssnext

閱讀 3796·2019-08-29 13:10
關于viewport引起的微信二維碼識別區(qū)域偏移的問題討論與解決

閱讀 1269·2019-08-29 10:56
每日一算（日更）

閱讀 2554·2019-08-26 13:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Webpack4 從零搭建 Vue 項目

相關文章

**為什么我不推薦你使用vue-cli創(chuàng)建腳手架？**

**關于Vue2一些值得推薦的文章 -- 五、六月份**

**關于Vue2一些值得推薦的文章 -- 五、六月份**

webpack4 的開發(fā)環(huán)境配置說明

發(fā)表評論

0條評論

Miracle_lihb

男|高級講師

TA的文章

css整理

網址收集

Array、Set、Map、Object學習總結

代碼質量管理——如何寫出優(yōu)雅地代碼

position fixed的相對容器是什么

webpack + PostCSS + cssnext

關于viewport引起的微信二維碼識別區(qū)域偏移的問題討論與解決

每日一算（日更）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Webpack4 從零搭建 Vue 項目

相關文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！