VueJs结合Webpack 4搭建项目的示例及实现方案咨询

当然有不少开发者已经在Vue项目里用上Webpack 4啦！我自己前阵子刚把几个老项目从Webpack 3迁移过去，也从零搭建过新的模板，下面就把具体步骤和经验分享给你。

1. 初始化项目 #

先创建项目文件夹并初始化npm环境：

mkdir vue-webpack4-demo && cd vue-webpack4-demo
npm init -y

2. 安装核心依赖 #

Webpack 4把核心包拆成了webpack和webpack-cli，再加上Vue相关的编译、加载工具：

# 生产依赖
npm install vue --save
# 开发依赖
npm install webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler css-loader style-loader html-webpack-plugin --save-dev

小提示：vue-template-compiler是vue-loader的必备依赖，专门用来编译Vue单文件组件的模板；html-webpack-plugin帮我们自动生成带打包资源引用的HTML入口文件

3. 编写Webpack配置文件 #

在项目根目录创建webpack.config.js，这是Webpack的核心配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  // 项目入口文件
  entry: './src/main.js',
  // 打包输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 加hash值做缓存优化
    filename: 'bundle.[hash].js'
  },
  // 模块加载规则
  module: {
    rules: [
      // 处理Vue单文件组件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 处理CSS文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  // 插件配置
  plugins: [
    // VueLoaderPlugin是Webpack 4下vue-loader必须的插件
    new VueLoaderPlugin(),
    // 生成HTML模板
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  // 本地开发服务器配置
  devServer: {
    contentBase: './dist',
    // 开启模块热替换
    hot: true,
    // 自动打开浏览器
    open: true
  }
};

4. 创建项目基础文件结构 #

按照配置里的路径，创建对应的文件：

public/index.html（HTML模板） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue + Webpack 4 Demo</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

src/main.js（项目入口） #

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

new Vue({
  el: '#app',
  render: h => h(App)
});

src/App.vue（根组件） #

<template>
  <div class="app-container">
    <h1>Hello Vue + Webpack 4!</h1>
    <p>这是一个完全基于Webpack 4搭建的Vue项目</p>
  </div>
</template>

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

<style scoped>
.app-container {
  text-align: center;
  margin-top: 60px;
  color: #333;
}
</style>

5. 添加npm脚本命令 #

在package.json的scripts字段里添加开发和构建命令：

"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
}

划重点：Webpack 4的mode参数非常关键，development模式会自动开启调试工具、禁用代码压缩；production模式会自动开启代码压缩、缓存优化等，省去了Webpack 3里很多繁琐的插件配置

6. 运行项目 #

• 启动本地开发服务：npm run dev，浏览器会自动打开页面，修改代码后会实时热更新
• 生产环境打包：npm run build，打包后的文件会输出到dist目录

额外优化建议 #

• 如果需要处理图片、字体等资源，可以安装file-loader或url-loader，并在Webpack配置里添加对应的加载规则
• 生产环境可以用mini-css-extract-plugin把CSS提取成单独的文件，提升加载性能
• 若需要兼容旧浏览器，可安装babel-loader、@babel/core和@babel/preset-env来转译ES6+语法

内容的提问来源于stack exchange，提问作者mazipan