webpack如何打包vue项目、webpack打包vue项目怎么启动!

本文意在带领读者简单搭建基于web环境下的Vue项目，在此过程中熟悉webpack以及vue的简单用法，请一定要按照步骤一步一步进行，循序渐进，从依赖包安装到webpack配置到vue单文件组件的引用到最后打包发布一条龙服务包各位看官满意；

下面坐端正，手放在电脑上，看老师，Let's go，整个过程预计在30min-45min；

最后会附上源代码下载链接

第一步：安装webpack

首先自行选择路径创建项目

并新建一个文件夹 webpack-vue

全局安装webpack，安装之前先检查全局是否已经安装并且确定版本

本文中 webpack 版本为 4.23.0，webpack-cli 版本为 3.1.2

检查版本命令为：

F:\vue-learns\webpack-vue>webpack -v 4.23.0 F:\vue-learns\webpack-vue>webpack-cli -v 3.1.2

如果没有安装请自行安装，命令如下：

yarn add webpack webpack-cli -g

第二步：项目初始化

进入项目目录：

cd vue-learns cd webpack-vue yarn init -y //新建 //和npm功能类似，如果还没安装yarn，网上有大量教程在此不赘述

安装vue webpack webpack-dev-server

yarn add vue （--save可省略） yarn add webpack webpack-dev-server --dev //--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。 //--dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

在项目根目录下新建index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>

在项目根目录下新建web

var path = require('path'); var webpack = require('webpack'); module.exports = {};

新建src文件夹目录，并且在src下新建main.js，此时目录结构如下：

webpack的思想就是一切皆模块，官方推荐使用commonJS规范，这使得我们浏览器端也可以使用commonJS的模块化写法 :module.exports = {}

src目录下新建一个u

module.exports = function say() { con('hello world'); }

main.js :

var say = require('./utils'); say();

web:

运行:

web 可能会运行报错，需要重新安装 yarn add -D webpack-cli

yarn run dev

可以发现浏览器自动打开一个http://localhost:8080/ 的页面 F12打开控制台可以看到有hello world打出

随意修改u，可以发现浏览器会自动刷新

如果我们希望看打包后的bundle.js文件，运行

yarn run build

webpack默认不支持转码es6，但是import export这两个语法却单独支持。所以我们可以改写前面的模块化写法

export default function say() { con('hello world '); }

第三步：引入vue

main.js:

import Vue from 'vue'; var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } });

index.html:

web :

重新运行npm run dev，可以看到，清一下缓存（ctrl+shift+delete），页面正常显示了'Hello Vue!'

第四步：引入scss和css

webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器

yarn add node-sass css-loader vue-style-loader sass-loader --dev

web:

注意：因为我们这里用vue开发，所以使用vue-style-loader，其他情况使用style-loader
css-loader使得我们可以用模块化的写法引入css,vue-style-loader会将引入的css插入到html页面里的style标签里

我们现在在src目录下新建style目录，style目录里新建common.scss

common.scss:

body { background: #fed; }

main.js:

import './style;;

重新 yarn run dev ，可发现样式生效

第五步：使用babel转码

ES6的语法大多数浏览器依旧不支持,bable可以把ES6转码成ES5语法，这样我们就可以大胆的在项目中使用最新特性了

yarn add babel-core babel-loader babel-preset-env babel-preset-stage-3 --dev

在项目根目录新建一个.babelrc文件

{ "presets": [ ["env", { "modules": false }], "stage-3" ] }

web添加一个loader

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } //exclude表示忽略node_modules文件夹下的文件，不用转码

现在我们来试下async await语法吧

export default function getData() { return new Promise((resolve, reject) => { resolve('ok'); }) }

main.js

import getData from './utils'; import Vue from 'vue'; import './style;; var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { async fetchData() { const data = await getData(); = data; } }, created() { (); } });

第六步：引入图片资源

把图片也当成模块引入

yarn add file-loader --dev

web添加一个loader

{ test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }

在src目录下新建一个img目录，存放一张图片logo.png

main.js:

import getData from './utils'; import Vue from 'vue'; import './style;; Vue.component('my-component', { template: '<img :src="url" />', data() { return { url: require('./img;) } } }) var app = new Vue({ el: '#app', data: { message: 'Hello Vue !' }, methods: { async fetchData() { const data = await getData(); = data; } }, created() { () } });

index.html:

在此刻我在重新 yarn run dev 的时候我报了一个如下的错误，应该是由版本引起的

解决方案：

yarn add babel-loader@7 --dev

安装完后重新 yarn run dev 便可以看见，图片也被正确加载了

第七步：单文件组件

在前面的例子里，我们使用 Vue.component 来定义全局组件

在实际项目里，更推荐使用单文件组件

yarn add vue-loader vue-template-compiler --dev

添加一个loader:

{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': [ 'vue-style-loader', 'css-loader', 'sass-loader' ], 'sass': [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ] } } }

在src目录下新建一个A

<template> <div id="app"> <h1>{{ msg }}</h1> <img src="./img;> <input type="text" v-model="msg"> </div> </template> <script> import getData from './utils'; export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js' } }, created() { (); }, methods: { async fetchData() { const data = await getData(); = data; } } } </script> <style lang="scss"> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; h1 { color: #CC3333; } } </style>

main.js:

import Vue from 'vue'; import App from './A'; import './style;; new Vue({ el: '#app', template: '<App/>', components: { App } })

index.html:

此处在yarn run dev 的时候又报错了

. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

解决:

web中加入：

最后发现控制台会报一个错误regeneratorRuntime is not defined，因为我们没有安装babel-polyfill

yarn add babel-polyfill --dev

然后修改web的入口

entry: ['babel-polyfill', './src;],

重新 yarn run dev ，可以发现单文件被正确加载了

第八步 source-map

在开发阶段，调试也是非常重要的一项需求。

A：

created() { (); con('23333'); }

我们点击进入这个console的详细地址:

进入的是打包后的build.js，我并不知道是在哪个组件里写的，这就造成了调试困难

这时就要修改web

module.exports = { entry: ['babel-polyfill', './src;], // 省略其他... devtool: '#eval-source-map' };

重新yarn run dev

进入控制台，这次调试，它直接返回那个组件的源代码了，这不是被打包过的！

第九步打包发布

我们先试着yarn run build打包一下文件

会发现，打包后的build.js非常大，有1M多并且提示了 [big]

在实际发布时，会对文件进行压缩，缓存，分离等等优化处理

web下，压缩代码不在web中写plugins: [ new web() ],而是在中的script下面写：

"scripts": { "build": "webpack --mode development" }, var path = require('path'); var webpack = require('webpack'); module.exports = { // 省略... optimization: { splitChunks: { chunks: 'all' } } }

再次重新打包

可以看见，压缩效果非常明显！

至此，一个非常简单的vue开发环境搭建成功。

本文仅做参考，并且同时我也参考了很多文章也踩了一些坑（不同版本的功能是大坑啊）

读者可以自行了解相关知识，这里只是带领大家了解最基础的webpack配置。

后续的vue学习便可以在此基础上继续深入了，加油

责任编辑: 鲁达

“webpack如何打包vue项目,webpack打包vue项目怎么启动,webpack打包vue项目app.js过大,webpack打包vue项目步骤,webp”边界阅读