webpack4 编译vue 2 项目

搭建环境

系统: window 10
Nodejs版本: v12.10.0
NPM版本: v 6.10.3

目录结构

工程的目录结构

编译工程的代码已经发布到github

> git clone https://github.com/ck-lin-yuanfu/webpack-vue.git
> cd webpack-vue
>npm install
>npm run build

package.json文件内容摘要

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "webpack 4.* 打包vue项目",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.6.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "vue-cropper": "^0.4.9",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "start": "webpack --config webpack.config.js",
    "build": "npx webpack --config webpack.config.js"
  },
  "author": "yuanfu",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  }
}

在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）

插件安装及说明

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader

# babel-loader  安装
>  npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
>  npm install webpack webpack-cli --save-dev
>  npm install vue-loader vue-template-compiler  --save-dev
>  npm install --save-dev style-loader css-loader # css资源
>  npm install --save-dev file-loader # 加载图片、加载字体
>  npm install babel-loader --save
>  npm install babel-core --save
>  npm install babel-runtime --save
> npm install --save-dev @babel/plugin-syntax-dynamic-import

@babel/plugin-syntax-dynamic-import插件使用你的代码可以异步加载
import('@/views/error-page/404.vue') 编译的文件会单独存放

vue项目编译

运行项目 使用以下命令

$  npx webpack --config webpack.config.js

生成的文件如下

上图为编译发布好的文件结构，可以部署到生产环境，以上代码在特定的环境下操作的，如果有遇到什么问题可以留言交流一同进步。