Vue基础篇学习——WebPack配置Vue

使用的IDE是VsCode

1.创建一个空的文件夹“npm配置Vue”用于创建Vue项目，并且用VsCode打开

这个文件夹是空的什么东西都没有，从零开始建立。

2.在项目文件夹中创建两个文件夹“dist”、“src”

dist:用于保存WebPack打包的文件

src:用于保存项目编写的文件

src编写完成后通过WebPack打包到dist，最终发布到服务器端。

3.安装npm包管理

WebPack是基于Node.js，所以需要安装npm包管理

a. 初始化npm包

在VsCode的终端输入：

npm init

b.安装npm包

终端输入：

npm install

c.在项目里面创建本地WebPack

终端输入：

npm install webpack

d.安装Webpack webpack-cli

Webpack4.0后，使用webpack打包需要安装webpack-cli。

终端输入：

npm install -D webpack-cli

 

以上步骤做完后，项目文件夹将会变成这样：

4.配置WebPack

a. 在项目根目录下创建“webpack.config.js”文件，此文件是WebPack读取配置的文件，名称不能错。

b.在src文件夹下创建main.js文件和index.html文件

main.js：用于依赖其他的js文件，Webpack打包这一个js文件即可；可以理解为项目的脚本入口

index.html：用于承载Vue组件，页面的入口

c.配置Webpack

在webpack.config.js文件下编写以下代码

const path = require('path');
module.exports = {
    mode: 'development',
    entry:'./src/main.js',
    output:{
        path : path.resolve(__dirname,'dist'),
        filename:'build.js'
    }
}

以上则是webpack的打包配置

在终端执行打包命令查看webpack是否配置好了

dist文件下生成了build.js文件，说明webpack配置完成了

5.在WebPakc环境下使用Vue编写代码

a. 在src文件夹中添加一个子文件Vue用于保存Vue组件，并添加一个Vue文件

b.编写一些基础的代码

在index.js编写以下代码：

在main.js编写以下代码：

在App.vue编写以下代码：

基础代码编写完毕后，不要急着打包，因为没有给Webpack配置Vue文件在Webpack打包的相关配置

c. 配置WebPack能够进行打包Vue的配置

在npm包安装Vue包管理：

npm install vue --save

在npm安装Webpack能读取Vue文件的loader

npm install vue-loader vue-template-compiler --save-dev

在WebPack中配置loader,在webpack.config.js编写：

未完结，明天再补充完整

补充昨天没有写完的地方

在Webpack中配置Vue扩展包，在webpack.config.js中编写：

 

安装html-webpack-plugin插件将index.html文件打包到dist文件夹中，并在webpack中配置

npm install --save-dev html-webpack-plugin

配置完成后，在终端进行webpack打包

npm run build

打包完成后在dist文件夹中会出现以下目录：

运行index.html

这就是在Vue组件中编写的mess用h2标签显示的数据

大功告成，

此文章是在学习Vue官方文档中总结的内容（才刚刚学习），若有地方使用不对，请多多指教

Demo的内容有使用到以下技术点：

Vue组件的使用，

Webpack配置，

Webpack使用loader打包不同文件类型，

Webpack使用扩展插件的配置与安装，

Webpack配置npm脚本命令进行打包。