Webpack学习笔记（二）

最新推荐文章于 2022-09-26 18:25:46 发布

无纸~文

最新推荐文章于 2022-09-26 18:25:46 发布

阅读量270

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/noingw96/article/details/105004773

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.配置高版本js兼容

babel是用于处理高版本js的兼容性问题。

安装依赖：npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

配置：

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
         loader: 'babel-loader',
         options: {
             presets: ['@babel/preset-env']
         }
    }
}
//再rules中增加配置内容

配置好后就可以识别高版本的js语法，帮我们转成es5的。

2.配置webpack-dev-server

之前每次修改后重新打包都需要执行npm run build的命令，非常麻烦。使用webpack-dev-server可以帮助我们启动服务，每次保存后都会自动刷新。（原因是这些打包的内容都在内存中）

安装依赖：npm install webpack-dev-server --save -dev

配置：package.json中增加

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev":"webpack-dev-server --config webpack.config.js"
},

启动项目的时候改成使用npm run dev，而不是npm run build。额外的可以在module.exports里增加配置。

devServer:{
    port:3000,//配置启动端口
    open:true//自动打开浏览器
}

3.开发环境与生产环境说明

开发环境是开发者在本地执行的环境，生产环境是运行在服务器供用户使用。因此打包后的文件在生产环境中应该尽可能的小，开发环境与生产环境的webpack配置文件不能共用一份。

但是很多配置是需要共有的，比如entry、output等。需要把公共配置抽离出来放在一个文件中然后进行合并，使用webpack-merge工具进行合并。

安装依赖：npm install webpack-merge --save-dev

在根目录下创建新的文件夹config，里面放置三个文件webpack.base.js（公共配置）、webpack.dev.js（开发配置）、webpack.pro.js（生成配置）。

为了展示的简洁，许多配置就省去只展示结构。

webpack.base.js：

//公共配置
const webpack = require('webpack');
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');//引入自动生成html的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入分离css的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//引入清除目录的插件
module.exports = {
    entry:"./src/main.js",
    output:{},
    module:{
        rules:[],
    },
    plugins: [],
}

webpack.dev.js：

//development开发环境的配置
//导入公共配置
const base = require('./webpack.base');
//导入用于合并的包
const merge = require('webpack-merge');
//merge方法传入多个参数，合并成一个对象，相同的而属性名后面会覆盖前面的
module.exports = merge( base, {
    mode:'development',
    devServer:{
        port:3000,
        open:true
    }
})

wepack.pro.js：

//development开发环境的配置
//导入公共配置
const base = require('./webpack.base');
//导入用于合并的包
const merge = require('webpack-merge');
//merge方法传入多个参数，合并成一个对象，相同的而属性名后面会覆盖前面的
module.exports = merge( base, {
    mode:'production',
})

这样我们就吧原来的一个配置文件拆分成三个，根据不同的环境执行不同的配置文件。

当然我们更改了配置文件的位置，也需要修改启动脚本的内容，修改package.json：

"scripts": {
    "build": "webpack --config config/webpack.pro.js",  //生产环境
    "dev": "webpack-dev-server --config config/webpack.dev.js"  //开发环境
},

4.多入口配置

当有多个文件需要打包的时候，即src目录下有article.js和index.js文件需要打包，可以修改入口和出口的配置项。

entry改成键值对的形式，打包后的文件名就会是“键名.bundle.js”。

entry:{
    'index':'./src/index.js',
    'article':'./src/article.js'
},
output:{
    path:path.join(__dirname,'../dist'),    
    filename: 'js/[name].bundle.js'  //name指代entry中的键名
},

5.提取公共模块

如果多文件打包，其中可能会包含相同的模块，比如index.js和article.js中都引入了jquery模块，使得打包后的两个文件都包含了jquery，因此可以将公共部分进行提取。在webpack.base.js中的module.exports增加配置：

optimization:{
    splitChunks:{
        chunks:'all'
    }
}

此时，我们的打包文件公共部分就被提取出来了（公共模块超过30kb会被独立打包）

6.webpack-vue-loader配置

这里开始讲述对vue项目的打包，新建一个vue项目的目录结构：

结构基本和之前相同，只是src目录下的文件换成app.vue和main.js文件，main.js是我们的入口文件,app.vue就是个单页面组件。

由于是对vue进行操作，所以需要进行安装。命令：npm install vue --save

app.vue

<template>
  <div id='content'>
      我是一个content组件
  </div>
</template>
<script>
export default {

}
</script>
<style>
</style>

main.js

//核心入口文件

//使用APP组件，渲染index.html中的视图
import Vue from 'vue'
import App from './app.vue'

new Vue({
    el:'#app',
    //使用vue底层的渲染方法
    //作用：使用APP组件，作为根组件，将来渲染视图
    render: function(createElement){
        return createElement(App)
    } 
})

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="Pragma" content="no-cache" />-->
    <title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>

在打包前还要注意的是webpack并不能识别vue，需要进行配置，安装依赖：cnpm install -D vue-loader vue-template-compiler

配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin');

rules中增加：

{
    test:/\.vue$/,
    loader:'vue-loader'
}

引入插件

plugins: [
    new VueLoaderPlugin()
],

配置好即可，完成了通过vue进行对index.html的渲染，index.html中的app只是放置vue组件的容器。

7.路由配置

安装路由的依赖：npm install vue-router --save

控制路由的文件可以放在router里，其他的一些vue文件可以放在views里，通过切换路由展示不同的vue页面。

app.vue

<template>
  <div id='app'>
       <!-- 路由出口 -->
      <router-view></router-view>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

router中的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Login from '../views/login.vue'
Vue.use(VueRouter);//使用路由

const router = new VueRouter({
    routes:[
        { path: '/' , redirect:'/home'},
        { path: '/home',component:Home},
        { path: '/login',component:Login}
    ]
})//配置每个路由对应的vue

export default router//导出供main.js调用

main.js

import Vue from 'vue'
import App from './app.vue'
import router from './router'
new Vue({
    el:'#app',
    //使用vue底层的渲染方法
    //作用：使用APP组件，作为根组件，将来渲染视图
    render: function(createElement){
        return createElement(App)
    } ,
    router
})

完成这些后，页面上就可以自由的切换路由了。

8.vue-cli脚手架环境搭建

利用vue create webpack-vue-mobile创建一个vue-cli的脚手架，创建过程中一些设置根据自己的情况进行选择。安装脚手架的好处是它可以帮助我们配置好大多数的webpack配置内容，不需要像上述那样我们自己去配置，但是学习的过程去了解一下也未尝不可。

安装后后的目录结构如下，和我们自己一步一步搭建的结构相差不多，只是我们是手动安装以助于我们更了解这些结构。

如果我们想要增加我们自己的配置，我们可以新增vue.config.js，它会覆盖默认的webpack里的打包配置。

9.vue-cli配置代理服务器

在开发过程中经常遇到跨域问题，可以利用devSerer里的proxy进行解决。

//这里面的配置内容会默认覆盖webpack的配置
module.exports = {
    devServer:{
        port:3000,
        open:true,
        proxy:{
            '/api':{
                target:'https://c.y.qq.com',//所有/api的请求都会代理到target服务器
                pathRewrite:{'^/api':''}
            }
        }
    }
}

这时候我们发送的ajax请求就可以正常获取到数据了。

vue

import axios from 'axios'

export default {
  async created(){
    const url = '/api/mv/fcgi-bin/getmv_by_tag?g_tk_new_20200303=1627212829&g_tk=1627212829&loginUin=1394252733&hostUin=0&format=json&inCharset=utf8&outCharset=GB2312&notice=0&platform=yqq.json&needNewCode=0&cmd=shoubo&lan=all'
    const res = await axios.get(url)
    console.log(res)
  }
}

无纸~文

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webpack学习笔记（二）

1.配置高版本js兼容babel是用于处理高版本js的兼容性问题。安装依赖：npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack配置：{ test: /\.js$/, exclude: /(node_modules|bower_components)/, us...
复制链接

扫一扫