基于 webpack 5 搭建 Vue 脚手架

对于基本项目来说,基本的开发依赖有:webpack、webpack-cli、vue-loader、vue-template-compiler、sass-loader、sass、css-loader、style-loader、babel-loader、@babel/core、@babel/preset-env

loader的作用是把代码中进行编译,转换。webpack-cli:这个cli提供了webpack的终端命令去调用webpack。vue-loader:把vue的代码转化成js代码,vue.loader里面有需要转化HTML,就需要vue-template-compiler,在代码中我们可能还需要使用sass或Less等其它的去快速书写css,处理sass代码需要sass-loader,它会把sass代码转化成css代码,处理css代码我们就需要css-loader,css处理好了之后我们需要把它通过style标签加入到我们的代码中去,所以就需要style-loader去吃力这个事情。css处理好了之后就需要处理我们的js啦。js呢,在开发过程中会用比较深得语法,为了避免老浏览器不兼容,我们就把新的语法转化成老的语法,如ES5语法,就需要bable-loader还需要bable的一个核心库,@bable/core ,还需要一个映射的配置集@babel/preset-env,

具体配置如下,通用的配置,得看不同的项目进行不同的配置,

const path = resolve('path')
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
  /**
   * entry
   * 文件打包的入口,注:这个是一个相对路径
   **/
  entry:'./scr/main.js',
  /**
   * output
   * path:打包后的文件存放路径 ,filename:打包后的文件名
   * '__dirname'这个属性是node内置的一个全局变量,它的值是一个当前文件所处在的绝对路径,和在终端数据pwd命令的结果一样
   * path.resolve()。path是node里面的内置模块,这个模块里面有个resolve()方法,这个方法用于拼接一个完整的路径
   **/
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bunder.js' ,
  },
  /**
   * module
   * 存放loader,模块,在webpack中,一切文件皆为模块,rules里面放的是一个对象,每个对象是一个Loader配置选项
   * 一个文件使用一个loader去处理的时候可以写成如:{test:/.vue$/,use:'vue-loader'},
   * 需要两个loader及以上,配置如:{test:/.vue$/,use:['vue-loader',xxx,xxx]},
   * 需要对这个loader选项进行配置的话,写成如:{test:/.vue$/,use:[{loader:'vue-loader',options:{}}]},
   **/
  module:{
    rules:[
      {test:/.vue$/,use:'vue-loader'},//处理vue文件
      {test:/.s[ca]ss$/,use:['style-loader','css-loader','scss-loader']}, //处理css,注意这三个loader的顺序
      {//处理js文件
        test: /.m?js$/,
        use:{
          loader:'bable-loader',
          options:{
            presets:['@bable/preset-env']
          }
        }
      },
      //处理开发中常见的几种图片,下面这个是以前老式的配置方法,是webpack5之前的
      // {test: /\.(png|jpe?g|gif|svg|webp)$/,use: {loader: 'file-loader',options: {esModule:false}}}
      {test: /\.(png|jpe?g|gif|svg|webp)$/,type:'asset/resource'}
    ]
  },
  plugins: [//存放插件
     //VueLoaderPlugin: 来补充vue-loader在处理vue的时候,它处理了模板里面的HTML,但是它不知道怎么处理里面的js,
    // 和css,就需要这个插件来补充,所以就通过这个插件告诉vue-loader,当遇到这些文件时,让我们之前配置过得loader去处理相应的文件
    new VueLoaderPlugin()
  ]
}
发现,经过了上面的配置,然后直接在控制台输入命令webpack,发现报错的,虽然我们安装了webpack-cli提供了这个命令,但是它安装到了node_modules文件中的.bin文件中webpack。如果想要执行这个命令,可以在终端控制台通过输入./node_modules/bin/webpack来执行,但是每次我们开发完代码,还输入这么长的命令,有点烦,可以通过这配置减少我们的命令,在package.json文件中,在scripts对象里面,加入"serve": "webpack --mode=development --watch",没必要加相对路径,如写成"serve": "./node_modules/bin/webpack"。我们在script中写入node_modules中的命令时,不用写路径,它会自动去找。--watch的命令是:当webpack发现我们开发中的代码修改保存时,它自动帮我们编译运行,不需要我们手动去执行

对于webpack命令编译启动后,我们配置了--watch,但是官网提供了更好的方式,webpack-dev-server,开发服务
第一步,下载
npm -D install webpack-dev-server
第二步,只要下载好了这个包,不用引入,直接使用,"serve": "webpack server --mode=development",然后在webpack文件中配置如下
  plugins: [//存放插件
     //VueLoaderPlugin: 来补充vue-loader在处理vue的时候,它处理了模板里面的HTML,但是它不知道怎么处理里面的js,
    // 和css,就需要这个插件来补充,所以就通过这个插件告诉vue-loader,当遇到这些文件时,让我们之前配置过得loader去处理相应的文件
    new VueLoaderPlugin()
  ],
  devServer: {
    static:'./dist' //打包后的静态资源文件,指向这个目录,
    open:true,//自动打开浏览器
    host: 'local-ip',//使用内网IP,使用ip代替localhost
    onListening({server}){//在终端打印访问地址
      const {address:addr,port} = server.address()
      console.log(`服务启动了:http://${addr}:${port}`)
    }
  },
  devtool:'inline-source-map' //报错对应到源代码

当然,上面的配置,只是webpack的基本配置,它还有一些优化,比如:HMR  source-map  缓存  tree shaking  lazy loading  externals,

HMR: hot module replacement 热模块替换 / 模块热替换
作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块),极大提升构建速度。样式文件可以使用HMR功能:因为style-loader内部实现了。 js文件:默认不能使用HMR功能 --> 需要修改js代码,添加支持HMR功能的代码,注意:HMR功能对js的处理,只能处理非入口js文件的其他文件。html文件: 默认不能使用HMR功能.同时会导致问题:html文件不能热更新了~ (不用做HMR功能)解决:修改entry入口,将html文件引入

source-map: 一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误)
1、source-map:外部:错误代码准确信息 和 源代码的错误位置
2、inline-source-map:内联:只生成一个内联source-map,错误代码准确信息 和 源代码的错误位置
3、hidden-source-map:外部:错误代码错误原因,但是没有错误位置,不能追踪源代码错误,只能提示到构建后代码的错误位置
4、eval-source-map:内联:每一个文件都生成对应的source-map,都在eval错误代码准确信息 和 源代码的错误位置
5、nosources-source-map:外部:错误代码准确信息, 但是没有任何源代码信息
6、 cheap-source-map:外部:错误代码准确信息 和 源代码的错误位置,只能精确的行
7、cheap-module-source-map:外部:错误代码准确信息 和 源代码的错误位置,module会将loader的source map加入
内联 和 外部的区别:1. 外部生成了文件,内联没有 2. 内联构建速度更快
开发环境:速度快,调试更友好
      速度快(eval>inline>cheap>...)
        eval-cheap-souce-map
        eval-source-map
      调试更友好  
        souce-map
        cheap-module-souce-map
        cheap-souce-map
      --> eval-source-map  / eval-cheap-module-souce-map
    生产环境:源代码要不要隐藏? 调试要不要更友好,内联会让代码体积变大,所以在生产环境不用内联
      nosources-source-map 全部隐藏
      hidden-source-map 只隐藏源代码,会提示构建后代码错误信息
      --> source-map / cheap-module-souce-map

缓存:babel缓存,cacheDirectory: true,让第二次打包构建速度更快
文件资源缓存有一下几种方式:
1、hash: 每次wepack构建时会生成一个唯一的hash值。 问题: 因为js和css同时使用一个hash值。如果重新打包,会导致所有缓存失效。(可能我却只改动一个文件)
2、chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样问题: js和css的hash值还是一样的
因为css是在js中被引入的,所以同属于一个chunk
3、contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样    
让代码上线运行缓存更好使用

tree shaking:去除无用代码。前提:1. 必须使用ES6模块化  2. 开启production环境。作用: 减少代码体积
在package.json中配置。"sideEffects": false 所有代码都没有副作用(都可以进行tree shaking)。问题:可能会把css / @babel/polyfill (副作用)文件干掉,"sideEffects": ["*.css", "*.less"]

lazy loading懒加载

console.log('index.js文件被加载了~');
// import { mul } from './test';
document.getElementById('btn').onclick = function() {
  // 懒加载~:当文件需要使用时才加载~
  // 预加载 prefetch:会在使用之前,提前加载js文件 
  // 正常加载可以认为是并行加载(同一时间加载多个文件)  
  // 预加载 prefetch:等其他资源加载完毕,浏览器空闲了,再偷偷加载资源
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};

externals

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'production',
  externals: {
    // 拒绝jQuery被打包进来
    jquery: 'jQuery'
  }
};

  • 1
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

草样的年华

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值