1webpack加载配置打包.vue文件笔记

Posted 2020-10-31 qw2010508123

一、创建一个初始化一个npm项目，然后一直回车选择默认

　　在终端输入npm init 回车选择默认值，会出现一个package.json文件然后就可以安装需要的包

二、安装需要的包

　　由于是一个小dome，我们来简单配置一下vue

　　输入：

npm i webpack vue vue-loader

 

　　然后会出现WARN

 

　　　　npm WARN [email protected] requires a peer of [email protected]* but none is installed. You must install peer 　　　　　dependencies yourself.
　　　　npm WARN vue[email protected] requires a peer of [email protected]^2.0.0 but none is installed. You must install peer dependencies yourself.

 

 

　　这两个WARN告诉我们需要的第三方依赖分别是css-loader，vue-template-compiler

三、安装第三方依赖

　　npm i css-loader vue-template-compiler

　　然后我们的初始化项目基本已经配置完了

四、创建一个app.vue文件 /src/app.vue

　　首先创建一个src文件作为我们的源码目录

　　.vue文件是vue的一个特殊的开发方式

　　他可以在文件里写

　　　　1.就是我们里面放的就是我们的html代码

<template></template>　

　　　　2.就是我们的js代码

<script>
　　　　　export default {
　　　　　　　　    data(){
　　　　　　　　　　return {
　　　　　　　　　　　　text:‘abc‘
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　</script>　　

　　　　3.<style></style>

　　　　　　就是我们这一个组件它特有的样式

 

　　这三点就组成了我们vue的组件

　　template就是我们需要显示的东西

　　script就是控制我们显示的内容如何去变化的

　　style 就是控制我们的内柔如何去展示

 

五、创建一个webpack.config.js来运行组件 ./webpack.config.js

　　webpack是用来帮我们打包前端资源的，比如javascript，css，图片，字体等等

　　这些东西都是我们前端资源要通过http请求加载的内容

　　那么在我们开发webapp的时候都是一整个js加载到浏览器端之后把所有的内容渲染出来

　　所以说我们很多时候可以简单的以js文件作为我们的入口

　　请求一个path包

　　

const path =require(‘path‘);

　　path：是nodejs的一个基准包，它是用来处理我们的路径的

　　首先我们配置module.exports = {

　　　　entry：path //首先需要声明入口 这里使用绝对路径保证我们不出任何的问题

　　　　}

六、创建一个index.js入口文件 ./src/index.js

　　src/app.vue是一个组件不能直接挂在到我们的HTML里面去所以我们要创建一个入口文件来挂载

　　我们使用import Vue from ‘vue‘将我们的vue类库引用进来

　　我们再使用import App from ‘./app.vue‘加载app.vue

　　然后我们new Vue({})

　　然后我们声明一个render，他就是一个最简单的方法 他接收一个h参数

　　这个h参数就是vue里面的createApp参数然后通过h(App)挂载到HTML里面

　　现在只是声明了渲染出来的只是App中的内容，挂载这一步我们还要调用他的一个api叫做$mount()

　　然后我们可以继续创建

　　

const root = document.createElement(‘div‘)

　　然后我们将div放到body里面

document.body.appendChild(root)

　　然后将vue的内容插到root里面,这样我们就可以展示我们app.vue 里面的内容

　　示例：

1 const root = document.createElement(‘div‘);
2 document.body.appendChild(root);
3 new Vue({
4  render:(h)=>h(App)                                
5    }).$mount(root)

 

七、配置entry路径 ./webpack.config.js

1 module.exports={
2 entry:path.join(__dirname,‘src/index.js‘)
3 }

注：

　　__dirname就代表我们webpack.config.js文件所在的目录他的地址，也就是根目录

　　path.join(__dirname,‘src/index.js‘)就是将__dirname和逗号后面的目录给拼接起来以保证我们绝对可以访问到我们想要访问的文件

八、设置output出口

　　既然有了入口我们就来设置我们的出口就是把我们的文件输出

1 module.exports={
2 entry:path.join(__dirname,‘src/index.js‘),
3 output:{
4　　 　　filename:‘bundle.js‘,//输出的文件名
5　　 　　path:path.join(__dirname,‘dist‘)//输出路径
6 　　　　}
7　　 }

这就是我们的输入和输出

就是我们输入一个index.js文件最终webpack会把我们index.js文件以及它里面所依赖的文件都给他打包成一个bundle.js 并且打包出来的是我们可以在浏览器直接运行出来的js代码

九、在package.json加一个脚本 ./package.json

　　

1 "scripts": {
2 　　　　　　"test": "echo \"Error: no test specified\" && exit 1",
3 　　　　　　"build": "webpack --config webpack.config.js"
4 　　　　　　},

 

　　我们再package.json里的scripts里加一个"build": "webpack --config webpack.config.js"；

　　这句话的意思呢就是使用webpack --config 指定我们的config文件 后面就是我们配置的webpack.config.js文件

　　为什么我们要这么去写呢？因为我们只有在这里面调用webpack它才会调我们安装在这个项目里面的webpack如果我们直接在命令行里面输他会调用全局的webpack这个时候全局的webpack可能跟我们使用的webpack的版本不一样随意我们还是使用这种版本会更加稳妥一点

　　写完之后呢我们就可以在命令行里输入：

npm run build

 

　　这个时候去运行的话会报错,会报只支持ES5的语法

十、处理语法不支持

　　我们在使用超出他理解范围的语法的时候，我们要用一些帮他去处理这些语法的工具为我们处理这个文件

　　我们加一个配置叫做module然后我们给他制定规则叫rules它是一个数组然后我们可以写很多的rules

　　然后我们使用一个test:/.vue$/这个test就是我们使用他去检查文件类型，它里面是一个正则表达式.vue加一个$就是以.vue作为文件结尾的就是我们app.vue这种类型的

　　然后他使用的loader就是‘vue-loader‘

　　webpack就是使用vue-loader来为我们处理app.vue的文件类型

　　这个时候就可以输出一个正确的js代码

　　示例：

 1 module.exports={
 2 　　　　entry:path.join(__dirname,‘src/index.js‘),
 3 　　　　output:{
 4 　　　　　　　　filename:‘bundle.js‘,//输出的文件名
 5　　　　 　　　　path:path.join(__dirname,‘dist‘)//输出路径
 6 　　　　　　　　},
 7 　　　　module:{
 8 　　　　　 rules:[
 9 　　　　　　　　　　{
10 　　　　　　　　　　　　test:/.vue$/,
11 　　　　　　　　　　　　loader:‘vue-loader‘
12 　　　　　　　　　　}
13 　　　　　　　　]
14　　　　　　 }
15 　　　　}

 

 

　　这个时候我们再来运行一次

npm run build

　　这时候我们会发现我们的项目目录里出现了一个dist文件夹。

　　这就证明我们成功了