webpack構(gòu)建項(xiàng)目

一. 初始化項(xiàng)目

1. npm init -y 初始化項(xiàng)目信息
2. npm install --save-dev webpack 安裝webpack 和 webpack-cli
3. 構(gòu)建項(xiàng)目目錄

   ├── dist
   │   └── index.html
   ├── node_modules
   ├── package.json
   └── src
        └── index.js
   └── webpack.config.js
   

PS: 一般定義src文件夾下面的main.js 或者 index.js為webpack的入口文件。Webpack會(huì)根據(jù)配置對(duì)不同類型的資源文件進(jìn)行不同方式的處理。

4. 創(chuàng)建webpack配置文件 webpack.config.js

  // webpack.config.js
  const path = require('path');
  module.exports = {
    mode: 'development',
    // 定義入口文件
    entry: './src/index.js',
    // 定義出口文件
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

PS: ___dirname 是nodejs環(huán)境的一個(gè)變量指的是當(dāng)前文件相對(duì)系統(tǒng)所處的路徑

5. 運(yùn)行項(xiàng)目中的webpack

    ./node_modules/webpack/bin/webpack.js
   

   或者直接在終端運(yùn)行:

    webpack
   

   PS: 如果webpack是在全局安裝的也可以直接運(yùn)行, 但一般項(xiàng)目都有自己的webpack版本

6. 使用webpack命令進(jìn)行打包, 則需要安裝 webpack-cli, 并確保全局安裝了 webpack-cli

    npm install webpack-cli -g
   

二. webpack開(kāi)發(fā)項(xiàng)目

2.1 dev-serve

為了能更加高效的進(jìn)行, 需要對(duì)webpack安裝熱更新插件, 步驟如下:

1. npm install --save-dev webpack-dev-server (注: 僅是開(kāi)發(fā)時(shí)依賴)
2. 在webpack.config.js中配置

module.exports = {
  devServer: {
      contentBase: './dist'
  },
}

注: 靜態(tài)掛載地址字段有可能不是contentBase, 有時(shí)也叫static,需要注意觀察dev-Serve的版本

3. 設(shè)置啟動(dòng)腳本, 在package.json中:

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  }
}

執(zhí)行 npm run dev 后 會(huì)根據(jù)這個(gè)腳本指令，去配置項(xiàng)尋找暴露的配置文件執(zhí)行！

4. 啟動(dòng) npm run dev
5. 設(shè)置路徑別名, 方便項(xiàng)目組件引用
   在webpack.config.js中

   module.exports = {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': path.resolve('src'),
      },
    },
   }
   

三. webpack開(kāi)發(fā)Vue項(xiàng)目

3.1 安裝依賴

1. 安裝Vue: npm i vue vue-router --save
2. 安裝 vue-loader 處理 Vue文件: npm i vue-loader --save-dev
3. 安裝 vue template 編譯器: npm i vue-template-compiler --save-dev

3.2 處理Vue的配置

在webpack.config.js文件中配置vue文件的加載器

module.exports = {
  module: {
    rules: [
      // 配置vue-loader,  vue
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
    ]
  }
}

同時(shí)需要配置vue加載器的插件, 在webpack.config.js中

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  plugins: [
    new VueLoaderPlugin(),
  ]
}

3.3 掛載Vue

在創(chuàng)建src根目錄下創(chuàng)建Vue根組件 App.vue

// App.vue
<template>
  <div class="page">
    你好呀! {{msg}}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "wang"
    }
  }
}
</script>

在入口文件中 main.js 中掛載根組件

import Vue from 'vue';
import App from './App.vue';
const vm = new Vue({
  render: (h) => h(App),
}).$mount("#App");

3.4 掛載Vue-Router

1. 在 src/router/index.js 中寫(xiě)入vue-router的配置

   import Vue from 'vue'
   import Router from 'vue-router'
   // 視圖組件1
   import Home from '../pages/home/index.vue'
   // 視圖組件2
   import Mine from '../pages/mine/index.vue'
   // Vue注入Router, 使得Vue中可以使用 this.$router/$route
   Vue.use(Router)
   export default new Router({
     mode: 'history',
     routes: [
       {
         path: '/',
         name: 'home',
         component: Home,
       },
       {
         path: '/home',
         name: 'home',
         component: Home,
       },
       {
         path: '/mine',
         name: 'mine',
         component: Mine,
       },
     ],
   })
   

2. 在實(shí)例化vue中放入vue-router參數(shù)

    import router from '@/router/index'
    const vm = new Vue({
      render: (h) => h(App),
      router,
    }).$mount('#App')
   

四. 設(shè)置項(xiàng)目運(yùn)行環(huán)境

1. 安裝設(shè)置環(huán)境插件: npm i cross-env --save-dev
2. 將webpakc.config.js的環(huán)境值設(shè)置為動(dòng)態(tài)的

   module.exports = {
    mode: process.env.NODE_ENV,
   }
   

3. 修改運(yùn)行腳本: package.json

   {
     "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
         "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
     }
   }
   

此處的 --config 可以選擇運(yùn)行時(shí)使用的webpack配置文件, 也就是說(shuō)可以使用兩套webpack配置文件 webpack.config.dev.js / webpack.config.build.js