vue + webpack 项目搭建

一、初始化项目

1. 创建项目文件夹
2. 初始化
   • 执行命令 npm init

二、安装依赖

1. 安装 webpack 相关依赖

   npm i webpack webpack-cli webpack-dev-server -D
   

   • webpack：模块打包器 webpack
   • webpack-cli：在控制台运行webpack命令的工具 命令行接口
   • webpack-dev-server：服务工具 开发服务器

2. 安装 vue 相关依赖

   npm i vue -S;
   npm i vue-loader vue-style-loader vue-template-compiler vue-hot-reload-api -D
   

   • vue：Vue.js
   • vue-loader：处理 vue 文件 Vue Loader
   • vue-style-loader：处理vue文件中的style vue-style-loader
   • vue-template-compiler：处理vue文件中的template vue-template-compiler
   • vue-hot-reload-api：Vue 组件的热重载 API vue-hot-reload-api

3. 安装 JS ES6 新语法 处理 相关依赖

   npm i babel-loader @babel/preset-env @babel/core @babel/plugin-transform-runtime @babel/preset-es2015 -D
   

   • 配置 .babelrc 文件 或 babel.config.js 文件， 配置babel

     {
         "presets": ["@babel/preset-env"],
         "plugins": ["@babel/plugin-transform-runtime"],
         "comments":false
     }
     

4. 安装 样式处理 相关依赖

   npm i style-loader css-loader -D
   

5. 安装 其它依赖

   npm i webpack-merge -D;
   npm i cross-env -D;
   npm i html-webpack-plugin -D
   npm i clean-webpack-plugin -D
   

   • webpack-merge：用来合并配置文件
   • cross-env：设置当前执行环境的插件
   • mini-css-extract-plugin：将 css 代码分离出来，方便缓存，生产环境下使用
   • clean-webpack-plugin：每次打包后清除 dist 文件

三、代码编写

• 根目录下创建 index.html

• 根目录下创建 src 文件夹

• src 目录下 创建 index.js

  import Vue from 'vue'
  import App from './app.vue'
  
  new Vue({
    el: "#app",
    render: h => h(App)
  })
  

• src 目录下 创建 app.vue

四、webpack 配置

• 公用配置：webpack.config.base.js

  const path = require('path')
  const { VueLoaderPlugin } = require('vue-loader')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, '../dist'),
      publicPath: './'
    },
    mode: process.env.NODE_ENV,
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          include: [
            path.resolve(process.cwd(), 'src'),
          ]
        },
        {
          test: /\.js/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        template: './index.html',
        filename: './index.html',
        inject: 'false',
        minify: {
          removeComments: true 
        }
      })
    ]
  }
  

• 生产环境：webpack.config.dev.js

  const base = require('./webpack.config.base.js')
  const { merge } = require('webpack-merge')
  const webpack = require('webpack')
  
  module.exports = merge(base, {
    devServer: {
      port: 8089,
      host: '127.0.0.1',
      publicPath: '/',
      open: true,
      hot: true,
      overlay: {errors: true}
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ]
  })
  

• 开发环境：webpack.config.pro.js

  const base = require('./webpack.config.base')
  const { merge } = require('webpack-merge')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  
  module.exports = merge(base, {
    output: {
      filename: 'js/[name][hash].js',
      chunkFilename: 'js/vendor[id][hash].js',
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true,
          },
          vendor: {
            test: /node_modules/,
            name: 'vendor',
            chunks: 'all'
          }
        }
      }
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: MiniCssExtractPlugin.loader },
            'css-loader'
          ]
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: 'css/[hash].css' }),
      new CleanWebpackPlugin()
    ]
  })
  

五、启动服务

1. 配置： 在 package.json 中配置

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

   • dev：开发环境，起服务
   • build：生产环境，打包

2. 启动服务

   • 开发环境：npm run dev
   • 生产环境：npm run build

六、开发环境最终效果

webpack+vue 效果展示.jpg