webpack构建项目

webpack构建项目

一. 初始化项目

1. npm init -y 初始化项目信息
2. npm install --save-dev webpack 安装webpack 和 webpack-cli
3. 构建项目目录

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

PS: 一般定义src文件夹下面的main.js 或者 index.js为webpack的入口文件。Webpack会根据配置对不同类型的资源文件进行不同方式的处理。

4. 创建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环境的一个变量指的是当前文件相对系统所处的路径

5. 运行项目中的webpack

    ./node_modules/webpack/bin/webpack.js
   

   或者直接在终端运行:

    webpack
   

   PS: 如果webpack是在全局安装的也可以直接运行, 但一般项目都有自己的webpack版本

6. 使用webpack命令进行打包, 则需要安装 webpack-cli, 并确保全局安装了 webpack-cli

    npm install webpack-cli -g
   

二. webpack开发项目

2.1 dev-serve

为了能更加高效的进行, 需要对webpack安装热更新插件, 步骤如下:

1. npm install --save-dev webpack-dev-server (注: 仅是开发时依赖)
2. 在webpack.config.js中配置

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

注: 静态挂载地址字段有可能不是contentBase, 有时也叫static,需要注意观察dev-Serve的版本

3. 设置启动脚本, 在package.json中:

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

执行 npm run dev 后 会根据这个脚本指令，去配置项寻找暴露的配置文件执行！

4. 启动 npm run dev
5. 设置路径别名, 方便项目组件引用
   在webpack.config.js中

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

三. webpack开发Vue项目

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',
      },
    ]
  }
}

同时需要配置vue加载器的插件, 在webpack.config.js中

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

3.3 挂载Vue

在创建src根目录下创建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 中写入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. 在实例化vue中放入vue-router参数

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

四. 设置项目运行环境

1. 安装设置环境插件: npm i cross-env --save-dev
2. 将webpakc.config.js的环境值设置为动态的

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

3. 修改运行脚本: 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 可以选择运行时使用的webpack配置文件, 也就是说可以使用两套webpack配置文件 webpack.config.dev.js / webpack.config.build.js