Webpack4 從零搭建 Vue 項目

時間  2019-11-16
標籤 webpack4 webpack 搭建 vue 項目 简体版
原文   原文鏈接
做者：NCUHOME-FED Flura的博客
已經得到原做者受權

主要設置

建立項目

新建一個項目文件夾css

npm init -y 初始化 package.jsonhtml

安裝 webpack 依賴包

npm install --save-dev webpack webpack-cli webpack-dev-servervue

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

安裝 Vue

npm install vuenode

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

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

// webpack.base.config.js
      const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  module: {
      rules: [
      // ... 其它規則
      {
          test: /\.vue$/,
          loader: 'vue-loader'
      }
      ]
  },
  plugins: [
      // 請確保引入這個插件！
      new VueLoaderPlugin()
  ]
 }

config詳細配置

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

webpack.config.js的配置git

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

html-webpack-plugin 能夠指定template模板文件，將會在output目錄下，生成html文件，並引入打包後的js.github

安裝依賴:web

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

配置webpack.config.js module中的rulesshell

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/'//文件輸出的公共路徑
  },
  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    //在單頁面應用開發中,咱們修改了代碼後是整個頁面都刷新,開啓hot後,將只刷新對應的組件
  }
}

建立項目目錄文件

在根目錄下建立一個index.html文件做爲啓動頁面，一個webpack.config.js做爲webpack配置文件(實際項目中這裏會有webpack配置文件，分別用於開發環境和生產環境，這裏簡便起見就用一個配置文件) ,再建立一個App.vue文件。

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>cet-query title</title>
</head>
<body>
  
</body>
</html>

index.js

import Vue from 'vue'
import App from './App.vue'

const root = document.createElement('div') //建立div節點
document.body.appendChild(root) //將div節點添加到body下

new Vue({
  render: (h) => h(App)  //vue在建立Vue實例時,經過調用render方法來渲染實例的DOM樹,也就是這個組件渲染的是App的內容
                        //vue在調用render方法時,會傳入一個createElement函數做爲參數,也就是這裏的h的實參是createElement函數,而後createElement會以App爲參數進行調用
}).$mount(root)

App.vue

<template>
  <div id="app">
    I am App.vue
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

添加啓動腳本

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

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

這樣執行npm run dev就能啓動成功了， npm run build也能打包生成dist文件

其它擴展處理

引入babel-loader兼容代碼

babel-preset-env 幫助咱們配置 babel。咱們只須要告訴它咱們要兼容的狀況（目標運行環境），它就會自動把代碼轉換爲兼容對應環境的代碼。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: [     //針對不一樣類型的文件,咱們定義不一樣的識別規則,最終目的都是打包成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         //在單頁面應用開發中,咱們修改了代碼後是整個頁面都刷新,開啓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"
  }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程