Vue.js学习第八天——webpack中的loader、配置vue及插件使用
- webpack中的loader
昨天我们学习了webpack中的css-loader和style-loader，今天我们来学习剩下常用的几个loader
1. less-loader
顾名思义，这个loader模块是用来加载less文件的，安装命令为npm install --save-dev less-loader less 前一个less-loader是用来加载less文件，后一个less是为加载less提供的支持文件，用来转化less成css，安装完成后进行相应的配置即可，配置在webpack中的loader里都有，不过这里我还是贴一下好了
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
2. url-loader和file-loader
less文件处理完了之后，还有图片文件要处理，这时候轮到我们的url-loader出场了，安装命令为npm install --save-dev url-loader，安装完成后，进入配置，代码如下
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片大小小于limit时，他会将图片编译成base64字符串形式 不需要单独的文件来存储
// 当加载的图片大小大于limit时，使用file-loader模块进行加载 会单独打包成另一个文件
// 这个值默认是8k
limit: 8192,
name: 'img/[name][hash:8].[ext]'
}
}
]
},
我们注意到，这里面有一个limit属性，后面跟着的是默认值8192，也就是8k，这里我直接说一下他的作用好了
- 当我们的图片文件小于这个limit值，这时候，图片会被编译成base64的字符串形式，不会生成新文件，这时候正常打包文件即可，页面也能正常显示；
- 当我们的图片文件大于这个limit值，这时候，我们将文件打包时就会报错，并且要求我们安装file-loader，安装命令为
npm install --save-dev file-loader,这个模块不需要另外进行配置，安装完成即可，这个时候我们就可以尝试着重新打包文件，发现并没有报错，但是当我们在浏览器打开它时，发现图片并不能显示，并且控制台显示找不到此文件，文件的路径为网站的根目录，并且在dist目录(存放打包完成后的目录)下，发现生成了一个新的图片文件，文件名为hash类型的，目的是防止重复，所以我们需要在webpack.config.js文件中添加publicPath的一个配置，目的是将路径前加入dist/这个路径，使得其能够找到此图片，具体的配置如下
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
// 涉及到路径 他都会在前面加一个dist 最后就不需要了
publicPath: 'dist/'
},
当然在我们后期进行开发的时候，由于index文件都要统一放置在dist目录下，所以就不存在找不到路径这一说了，到时候删去即可。
这时我们发现文件的名字很乱，这样就会导致我们一时间分不清是什么文件，所以我们还需要在limit下添加一个name属性，如上面的代码所示，这样当图片文件大于limit值时，会自动将生成的新文件在我们的name配置下的路径，并且我们还能指明它的文件名称，这样就方便辨认了。
3.babel-loader
当我们在查看打包完成的bundle.js文件时，我们发现其中还是有ES6的语法，这就意味着在不支持ES6的浏览器中，我们的代码是没有办法运行的，此时就需要我们采用babel-loader的模块帮助我们将ES6的语法转换成ES5。安装命令为：npm install babel-loader@7 babel-core babel-preset-es2015，官网上说的命令为npm install [email protected] @babel/core @babel/preset-env webpack或npm install babel-loader babel-core babel-preset-env webpack,我们这里为了将babel-loader的版本和我们的webpack版本一致，采用7的版本，然后这个babel-loader还需要一些核心的东西就是后面跟着的babel-core，再后面的babel-preset-env是一些配置的东西，如果是typescript的转换则采用不同的配置文件，然后官网后面还跟着webpack这里我们已经有了就不需要了，安装完成之后，还要进行配置，代码如下：
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
这时候我们再进行打包的时候bundle.js文件中就不会再有ES6相关的语法了。
- webpack中配置vue
接下来我们就可以在webpack中配置我们的vue环境了，当然我们首先也要安装有关vue的相应的包及相应的loader，安装命令为npm install vue --save和npm install vue-loader vue-template-compiler --save-dev(执行完后需要修改package.json文件中"vue-loader": "^13.0.0",因为14.0以上版本需要安装其它插件)，我们也注意到前一个命令没有加–dev说明它在运行时也是需要我们的vue的，然后我们就可以重新打包文件了，在浏览器中打开文件，我们发现文件并不能运行，并且在控制台报错了，控制台显示我们正在使用的是tuntime-only版本，让我们使用runtime-compiler版本，实际上vue在构建的时候，构建了以上两个版本，如果我们使用第一个版本，这就代表代码中不能有任何template，这个版本就没有关于编译template的文件，只有使用runtime-compiler版本，才能编译template代码，那们怎么使用第二个版本呢，这时候就需要相应的配置了，代码如下：
resolve:{
// 导入的时候省略后缀
//extensions:['.js','.css','.vue'],
// 别名
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
完成以上配置后，我们再次打包文件就不会出现以上的情况了，然后就是Vue相关的编写了，这里我就不说明怎么一步步抽取出来了，直接上代码吧，首先在src中新建Vue文件夹，创建两个vue文件 Cpn.vue和Tpl.vue
Cpn.vue代码如下：
<template>
<div>
<p>我是Cpn组件</p>
<p>大家好啊，初次见面嗷</p>
<button @click="hello">我是Cpn组件的按钮</button>
</div>
</template>
<script>
export default {
methods: {
hello(){
alert('hello');
}
},
}
</script>
<style>
</style>
Tpl.vue
<template>
<div>
<h1 class="yes">{{message}}</h1>
<h1>{{date}}</h1>
<Cpn/>
</div>
</template>
<script>
import Cpn from './Cpn.vue';
export default {
data(){
return {
message: 'webpack',
date: '2020-02-13'
}
},
components:{
Cpn
}
}
</script>
<style>
.yes{
color:aqua
}
</style>
main.js代码(主要看最后关于Vue的部分即可)
// 1.使用CommonJs方式导入
const {add,Unadd} = require('./js/info.js');
add(10,20);
Unadd(20,10);
// 2.使用ES6方式导入
import {chu} from './js/math.js';
chu(20,2);
// 导入css文件
require('./css/nomal.css');
//导入less文件
require('./css/special.less');
document.writeln('<h1>hello beanBag</h1>');
// 导入vue文件
import Vue from 'vue';
// import Tpl from './vue/Tpl'
import Tpl from './vue/Tpl.vue'
new Vue({
el: '#container',
template: '<Tpl/>',
components: {
Tpl
}
})
在加载.vue文件时还需要进行如下配置：
{
test: /\.vue$/,
use:['vue-loader']
}
这里有一细节问题，就是在导入的时候如果你不想写文件后缀的话，可以添加下面这行配置：
resolve:{
// 导入的时候省略后缀
extensions:['.js','.css','.vue'],
// 别名
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
- webpack中Plugin的使用
plugin是插件的意思，它是对webpack本身的一种拓展，是一个扩展器，而loader是用于转换某些类型的模块，是一个转换器。
今天只学习了一种插件，BannerPlugin用于添加版权信息
首先应该在webpack.config.js文件中引入webpack模块，并在plugin属性中做相应的设置，webpack.config.js文件完整代码如下：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
// 涉及到路径 他都会在前面加一个dist 最后就不需要了
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片大小小于limit时，他会将图片编译成base64字符串形式 不需要单独的文件来存储
// 当加载的图片大小大于limit时，使用file-loader模块进行加载 会单独打包成另一个文件
// 这个值默认是8k
limit: 8192,
name: 'img/[name][hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
// 导入的时候省略后缀
extensions:['.js','.css','.vue'],
// 别名
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin('最终版权归beanBag所有')
]
}
这里注意最后一行即可，这时候当我们重新打包文件的时候，在你打包好的文件的第一行就会出现你在BannerPlugin里写的那行话。
