vue + webpack 项目搭建

一、初始化项目

创建项目文件夹
初始化
- 执行命令 npm init

二、安装依赖

安装 webpack 相关依赖
```
npm i webpack webpack-cli webpack-dev-server -D
```
- webpack：模块打包器 webpack
- webpack-cli：在控制台运行webpack命令的工具命令行接口
- webpack-dev-server：服务工具开发服务器
安装 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

安装 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
}

安装样式处理相关依赖
```
npm i style-loader css-loader -D
```
安装其它依赖
```
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



  
    
    webpack + vue

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()
  ]
})

五、启动服务

配置：在 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：生产环境，打包

启动服务
- 开发环境：npm run dev
- 生产环境：npm run build

六、开发环境最终效果

webpack+vue 效果展示.jpg