Webpack安装方式、webpack-dev-server、html-webpack-plugin、各种loader、Babel、vue如何使用

最新推荐文章于 2024-09-05 14:26:45 发布

原创最新推荐文章于 2024-09-05 14:26:45 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

2020-12 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Webpack的基本概念、安装方式，包括全局安装和项目局部安装，并详细讲解了webpack-dev-server的使用，包括两种启动方式。此外，还涵盖了html-webpack-plugin、处理非js文件的loader如css、less、图片和字体文件，以及Babel的配置和使用，最后讨论了在Webpack中引入和使用Vue以及Vue Router的方法。

Webpack起步

为什么使用webpack

1.网页引用的静态资源（JS,CSS,Images，字体文件，模板文件）多了以后会发起很多的二次请求

2.要处理错综复杂的依赖关系

什么是webpack

基于前端的一个项目构建工具，是基于Node.js的一个前端工具，可以对项目进行合并、压缩、精灵图、图片的Base64编码

webpack两种安装方式

运行npm i webpack -g全局使用webpack命令

项目目录

在终端中输入npm init -y生成package.json配置文件

node_modules:执行cnpm i安装必要的包
dist
- bundle.js
  
  解决js文件中的依赖问题，可以将所有的js、css、vue等打包生成唯一一个bundle.js文件
src:源代码
- css
- images
- js
main.js ：项目的js入口文件，导入文件：import ** form **,由于ES6的语法浏览器解析不了，需要执行webpack .\sec\main.js .dist\bundle.js命令，将main.js文键解析成为bundle.js文件存入到dist目录下

webpack.config.js : 通过Node中的模块操作，向外暴露了一个配置对象，此时执行webpack就可以自动执行将main.js解析成为bundle.js文件

const path=require('path')
module.exports={
    entry: path.join(_dirname,'./src/mian.js'),//入口文件
    output:{//出口文件
        path:path.join(_dirname,'./dist'),
        filename:'bundle.js'
    } 
}

package.json
index.html

webpack-dev-server自动打包编译

第一种方式（推荐）

运行 npm i webpack-dev-server - D下载工具，安装到项目的本地开发依赖
注意，即使全局配置了webpack也需要本地安装webpack才能使用这个工具
webpack-dev-server帮我们生成的bundle.js文件托管到了电脑的内存中，并不是实际存在于物理硬盘，所以项目根目录看不到这个打包好的bundle.js
在package.json配置文件中，找到“scripts",加入:

“dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”
执行 npm run dev 就能自动打开端口为3000，根目录下的页面内容，此时显示的页面是上述项目目录中的index。启用了hot可以执行时只更新少量的代码，减少不必要的刷新请求。

第二种方式（了解）

html-webpack-plugin

自动在内存中根据指定页面生成一个HTML页面
自动将打包好的bundle.js文件追加到正确的路径下面

在webpack.comfig.js文件中的 plugins 节点里面，加入：

const htmlWebpackPlugin=require('html-webpack-plugin')
new htmlWebpackPlugin({//创建一个在 内存 中生成HTML页面
    template: path.join(_dirname, './src/index.html'),
    filename: 'index.html'
})

webpack处理非js类型文件

默认情况下，webpack无法处理url地址，需要手动安装合适的第三方loader加载器，调用loader时是从后往前调用

打包处理css文件
1. 执行 cnpm i style-loader css-loader -D，安装两个加载器
2. 在webpack.config.js里面新增一个配置节点叫做 module，是一个对象；module有一个rules属性，是一个数组，存放了所有第三方的匹配和处理规则
3. ```
module:{新的节点，配置所有第三方模块加载器
    rules:[//所有第三方的匹配规则
        {test:/\.css$/,use: ['style-loader','css-loader']},//匹配css文件
    ]
}
```

打包处理less文件

执行 cnpm i less-loader -D，安装加载器

 {test:/\.less$/,use: ['style-loader','css-loader','less-loader']}

sass文件需要的loader：sass-loader(需要先安装node-sass)

图片文件：

{test:/\.jpg|png|gif|bmp|jepg$/,use :'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}//hash值+原名+原后缀
//limit给定的值是图片的大小，如果我们引用的图片>=limit值，则不会转为base64类型的字符串，如果小于给定的limit值则会被转为base64的字符串

字体文件：

{test: /\.ttf|eot|svg|woff|woff2$/,use: 'url-loader'},

Babel

安装两套包以获取webpack处理全部的ES6语法或者ES7语法

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D

在webpack.config.js中module节点下的rules数组里面添加新的匹配规则：

{test:/\.js$/,use: 'babel-loader',exclude:/node_modules/}
//排除掉该目录打包速度很快，不用编译该目录下的所有js文件

在项目的根目录中，新建一个 .babelrc 的babel配置文件，该文件属于JSON格式，必须符合JSON语法规范：不能写注释，字符串必须用双引号。

{
    "presents":["env","stage-0"],
    "plugins":["transform-runtime"]
}

Render函数

在页面中渲染组件

var login = {
template:'<h1>登陆组件</h1>'
}

var vm = new Vue({
  el:'',
  data:{},
  methods:{},
  render: function (createElement){
      return createElement(login)//return的结果会替换页面中el指定的容器
  }
})

使用Vue

安装vue的包： cnpm i vue -s

类似于普通vue实例使用方式
1. import Vue from ‘…/node_modules/vue/dist/vue.js’
2. import Vue from ‘vue’
  
  在webpack.config,js中加入
```
resolve:{
    alias:{//修改vue被导入时的路径
        "vue$": "vue/dist/vue.js"
    }
}
```
render函数渲染组件
1. 定义一个纯粹的组件:login.vue
  
  这是使用.vue定义的组件
2. 导入login.vue组件
```
import login from './login.vue'
```
3. 新增配置项
  
  cnpm i vue-loader vue-template-compiler -D
  
  {test:/.vue$/,use:‘vue.loader’}
4. 使用render函数渲染组件
```
 render: function (createElement){
      return createElement(login)//return的结果会替换页面中el指定的容器
  }

//下面是简写
render: c => c(login)
```

模块间暴露成员

在一个模块中。可以使用export default（暴露一次）和export（暴露多次）成员

export default向外暴露的成员可以使用任意的变量来接收

//暴露成员的模块
export default{
    name:'zhangsan',
    age:'18'
}

//接收成员的模块
import suiyi from './test.js'

export暴露的成员只能使用{ }的形式来接收，这种方式叫做按需导出

//暴露成员的模块
export var title='lalala'
export var content="star"

//接收成员的模块
import {title as changed,content} from './test.js'//as起别名
console.log(changed+comtent)

webpack-vue-router

import Vue from 'vue'
//1，导入包
import VueRouter from 'vue-router'
//2，手动安装
Vue.use(VueRouter)
//导入组件
import app from './App.vue'
import aa from './main/AA.vue'
import bb from './main/BB.vue'

//导入aa的子组件
import a1 from './subcom/A1.vue'
import a2 from './suncom/A2.vue'

//3,创建路由对象
var router=new VueRouter({
    routes:[
        {path: '/aa',
         component:aa,
        chirldren:[
            {path: '/a1',component:a1},
            {path: '/a2',component:a2}
        ]
        },
        {path: '/bb',component:bb}
    ]
})
var vm = new Vue({
    el:'#app',
    render:c => c(app)//把el控制的区域渲染成为app组件，所以将路由链接放在app组件中
    //4，挂载路由对象到vm上
    router
})

<template><div>
    <h1>
        这是aa组件
    </h1>
    <router-link to="/aa/a1">这是a1组件</router-link>
    <router-link to="/aa/a1">这是a2组件</router-link>
    <router-view></router-view>
    </div>
</template>
<script></script>
<style></style>

<template><div>
    <h1>
        这是bb组件
    </h1>
    </div>
</template>
<script></script>
<style></style>

<template><div>
    <h1>
        这是app组件
    </h1>
    <router-link to="/aa">aa</router-link>
    <router-link to="/bb">bb</router-link>
    <router-view></router-view>
    </div>
</template>
<script></script>
<style lang="scss" scoped>
    <!--.vue组件中定义的样式，推荐开启scoped标签，样式只在组件中使用，通过css选择器实现的;
    lang属性指定样式语法
    -->
    
</style>