美文网首页
手写一个 vue 项目的webpack 的配置 1

手写一个 vue 项目的webpack 的配置 1

作者: hegege | 来源:发表于2020-08-04 15:39 被阅读0次

    最近闲下来了，就做做技术分享
    系列文章计划分为三篇

    • 手写一个vue的webpack配置
    • 手写 一个 react的项目webpack 实践
    • 手写一个webpack的脚手架
      我们经常在项目中遇到修改webpack的配置，但是 只是单纯的依靠脚手架，现在我们由易到难，手敲一下我们的vue 的webpack 配置代码，希望对大家有所帮助
    1. 首先熟悉一下webpack的构建流程
    • 初始化
      通过 yargs 解析 config 与 shell 中的配置项，生成compiler 对象
    • 执行编译
      通过生成的compiler对象，加载我们所有的配置和插件，开启run 方法开始编译
    • 查找入口
      找到所有的配置文件
    • 编译模块
      调用模块加载器（loader）对所有模块进行编译
    • 编译并输出资源
      编译完成后得到得到每个模块的编译后的内容和各模块的依赖关系，组合成包含多个模块的chunk，并把chunk转化为文件 加入到输出列表
    • 输出完成
      确定好文件的输出路径，根据配置确定输出的路径和文件名字
    1. 熟悉了webpack 的构建流程之后哪，那我们就来热热手，根据我们构建流程来理解一下我们完成我们一个vue脚手架的基本配置

    首先我们要准备一下我们的工具和插件

    • vue 依赖
    vue-loader vue-template-compiler vue-style-loader
vue
    • webpack插件
    webpack webpack-cli
1 配置热更新
 webpack-dev-server
2 链接html
html-webpack-plugin
3 配置css
style-loader css-loader
 less less-loader
拆分 css
mini-css-extract-plugin
4 配置浏览器前缀
postcss-loader autoprefixer 
5 打包文件 图片 媒体 字体类
url-loader file-loader
6 bable 转换
babel-loader @babel/core @babel/preset-env
7 清空dist 目录
clean-webpack-plugin
配置package.json 文件

    我们大家要了解一下上述插件的含义 方便我们进行配置
    那么现在我们就开始我们的旅程吧

    1. 启程
    • 初始化项目
    npm init 

初始化我们的文件 做一下基本的配置
{
  "name": "vue-test",
  "version": "1.0.0",
  "description": "'这是一个webpack配置'",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "tehe",
  "license": "ISC"
}
    • 安装webpack 建立入口文件
      npm下载比较慢 我这里全用的cnpm
    cnpm i -D webpack webpack-cli
  "devDependencies": {
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12"
  }
下载完成之后 我们在package.json 同级目录建立src 文件夹
并建立入口文件main.js
    image.png
    • 建立build 文件夹 作基本配置
    在src  同级目录建立build的文件夹
并在build的文件夹下建立webapck.config.js 配置输入和输出
const path= require('path')

module.exports= {
  mode:'development',//默认开发模式
// 配置 输入
  entry:{
   app:path.resolve(__dirname,'../src/main.js')  //配置入口
  },
// 配置输出
  output:{
    filename:'[name].[hash:8].js', // 打包后的文件名称
    path:path.resolve(__dirname, '../dist') //打包的目录
  }
}
    • 安装和配置vue 的依赖
     cnpm i -D vue-loader vue-template-compiler vue-style-loader
配置vue的依赖
const path= require('path')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports= {
  mode:'development',//默认开发模式
  entry:{
    app:path.resolve(__dirname,'../src/main.js')  //配置入口
  },
  output:{
    filename:'[name].[hash:8].js', // 打包后的文件名称
    path:path.resolve(__dirname, '../dist') //打包的目录
  },
  // module 配置 loader
  module:{  rules:[{
    test:/\.vue$/,
    use:['vue-loader']
}]}
resolve:{
  // 在组件之间相互引用时我们可以省略后缀    
  //类似import Hello from '../src.components/Hello' 是可以被识别的;
  extensions:['*','.js','.json','.vue'],
  // 配置 别名使用 我们就可以省略 多级目录 比如上面的加入这个配置就可以
  //  写成import Hello from '@components/Hello';
  alias:{
    'vue$':'vue/dist/vue.runtime.esm.js',
    '@':path.resolve(__dirname,'../src'),
    //我们自定义一个别名  通过@img 代替../src/assets/images
    //'@img':path.resolve(__dirname,'../src/assets/images'),

  },
}
}
    • 加入热更新 cnpm i -D webpack-dev-server
    cnpm i -D webpack-dev-server
const path= require('path')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
// 启用热更新的第1步
var webpack = require('webpack');
module.exports= {
  mode:'development',//默认开发模式
  entry:{
    app:path.resolve(__dirname,'../src/main.js')  //配置入口
  },
  output:{
    filename:'[name].[hash:8].js', // 打包后的文件名称
    path:path.resolve(__dirname, '../dist') //打包的目录
  },
  // module 配置 loader
  module:{  rules:[{
    test:/\.vue$/,
    use:['vue-loader']
}]},
resolve:{
  // 在组件之间相互引用时我们可以省略后缀    
  //类似import Hello from '../src.components/Hello' 是可以被识别的;
  extensions:['*','.js','.json','.vue'],
  // 配置 别名使用 我们就可以省略 多级目录 比如上面的加入这个配置就可以
  //  写成import Hello from '@components/Hello';

  alias:{
    'vue$':'vue/dist/vue.runtime.esm.js',
    '@':path.resolve(__dirname,'../src'),
    //我们自定义一个别名  通过@img 代替../src/assets/images
    //'@img':path.resolve(__dirname,'../src/assets/images'),

  },
},
// 启用热更新的第二步
devServer: {
  // 这是配置 dev-server 
  open: true, // 自动打开浏览器
  port: 3000, // 设置启动时候的运行端口
  contentBase: 'src', // 指定托管的根目录
  hot: true // 启动热更新的第一步
},
// 配置插件
plugins:[
  // new 一个热更新的模块对象，这是启用热更新的第三步
 new webpack.HotModuleReplacementPlugin()
]
}
    • 配置 html-webpack-plugin style-loader css-loader
      less less-loader postcss-loader autoprefixer
     html-webpack-plugin 
 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
 可以生成创建html入口文件，配置N个html-webpack-plugin可以生成N个页面入口
style-loader css-loader
less less-loader 
/ 如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出
 css-loader会处理 import / require（） @import / url 引入的内容。
sass-loader把scss转成css
less-loader把less转成css
style-loader把css转换成脚本加载的JavaScript代码  几者配合使用
为css 添加浏览器前缀
postcss-loader autoprefixer  

cnpm i -D  html-webpack-plugin 
配置 html-webpack-plugin 
const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
    template:path.resolve(__dirname,'../public/index.html'), //html模板所在的文件路径
    filename:'index.html' //输出的html的文件名称
//  inject
// 注入选项。有四个选项值 true, body, head, false.

// true：默认值，script标签位于html文件的 body 底部
// body：script标签位于html文件的 body 底部（同 true）
// head：script 标签位于 head 标签内
// false：不插入生成的 js 文件，只是单纯的生成一个 html 文件
  }),


cnpm i -D style-loader css-loader  less less-loader
npm i -D postcss-loader autoprefixer  

 配置 css loader
{
  test:/\.css$/,
  use: ['vue-style-loader','css-loader',{
    loader:'postcss-loader',
    options:{
      plugins:[require('autoprefixer')]
    }
  }]
},
{
  test:/\.less$/,
  use: ['vue-style-loader','css-loader',{
    loader:'postcss-loader',
    options:{
      plugins:[require('autoprefixer')]
    }
  },'less-loader']
}
    • file-loader vs url-loader

    file-loader vs url-loader
    二者一般只选择一个来进行对文件的打包，防止有冲突出现导致图片加载失败
    但是 可以在url-loader的fallback属性指定不满足条件时的 loader
    url-loader 依赖于 file-loader，如果不安装 file-loader，会报错误
    url-loader会通过配置规则将一定范围大小的图片打包成base64的字符串，
    放到dist.js文件里，而不是单独生成一个图片文件。而file-loader在打包时一定会生成单独的图片文件。

    {
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10 * 1024,
        fallback: 'file-loader'
      }
    }
  ]
},


我们可以在项目中配合使用
{
  test: /\.(jpe?g|png|gif)$/i, //图片文件
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10*1024,
        fallback: {
          loader: 'file-loader',
          options: {
              name: 'images/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体文件
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 49460,
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
},


{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 49460,
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'medias/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
},
    • 配置babel 转码
      配置完上述配置 我们还要把我们配置一下我们的babel
      把我们的只会将 ES6/7/8语法转换为ES5语法
     cnpm i -D babel-loader @babel/preset-env @babel/core
 babel-loader是webpack 与 babel的桥梁，
 不会做把es6转成 es5的⼯作，这部分工作需要⽤用到@babel/preset-env来做 ,
babel/core babel的核心库，提供了很多核心语法

有些新特性有时候我们不能全部满足，这时候我们借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性 。
cnpm install --save @babel/polyfill
引入main.js
import '@babel/polyfill'
{
  test:/\.js$/,
  use:{
    loader:'babel-loader',
    options:{
      presets:[
        ['@babel/preset-env']
      ]
    }
  }
},
    • 新建 app.vue 修改 main.js
    src 下面新建 App.vue
<template>
  <div >
    {{title}}
  </div>
</template>
<script>
export default {
  data(){
    return {
      title:'hello'
    }
  }
}
</script>

修改public  下面的index.html  挂载 app
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>app</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

修改main.js
import '@babel/polyfill'
console.log('hahhaha')
import Vue from "vue";
import App from './App'
new Vue({
  render:h=>h(App)
}).$mount('#app')
    • 加入运行命令
        "dev": "webpack-dev-server --config build/webpack.config.js",
    "build": "webpack --config build/webpack.config.js"

    运行 npm run dev 发现启动成功


    image.png

    运行npm run build 发现我们也打包成功


    image.png
    • 清除dist 文件
      这时候 当我们去再打包 一次 发现原来的文件还存在，这个时候就需要我们的clean-webpack-plugin 文件出马 这个文件是每次打包前可以清除我们的dist 文件的
    cnpm i -D clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//  清除dist文件 plugins
 new CleanWebpackPlugin()

    至此 我们的一个基础版本的vue webpack 已经完成了
    全部 config.js

    const path= require('path')
// 启用热更新的第1步
var webpack = require('webpack');
// 清除dist文件夹
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// vue 加载项
const vueLoaderPlugin = require('vue-loader/lib/plugin')
// 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
// 可以生成创建html入口文件，配置N个html-webpack-plugin可以生成N个页面入口
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出
// css-loader会处理 import / require（） @import / url 引入的内容。
// sass-loader把scss转成css
// less-loader把less转成css
// style-loader把css转换成脚本加载的JavaScript代码  几者配合使用

module.exports= {
  mode:'development',//默认开发模式
  entry:{
    app:path.resolve(__dirname,'../src/main.js')  //配置入口
  },
  output:{
    filename:'[name].[hash:8].js', // 打包后的文件名称
    path:path.resolve(__dirname, '../dist') //打包的目录
  },
  // module 配置 loader
  module:{
    rules:[{
    test:/\.vue$/,
    use:['vue-loader']
},
// 编译css
{
  test:/\.css$/,
  use: ['vue-style-loader','css-loader',{
    loader:'postcss-loader',
    options:{
      plugins:[require('autoprefixer')]
    }
  }] // 从右向左解析
},
// 编译less
{
  test:/\.less$/,
  use: ['vue-style-loader','css-loader',{
    loader:'postcss-loader',
    options:{
      plugins:[require('autoprefixer')]
    }
  },'less-loader'] //// 从右向左解析
},
//file-loader vs url-loader
// 二者一般只选择一个来进行对文件的打包，防止有冲突出现导致图片加载失败
// 但是 可以在url-loader的fallback属性指定不满足条件时的 loader
// url-loader 依赖于 file-loader，如果不安装 file-loader，会报错误
// url-loader会通过配置规则将一定范围大小的图片打包成base64的字符串，
// 放到dist.js文件里，而不是单独生成一个图片文件。而file-loader在打包时一定会生成单独的图片文件。
{
  test: /\.(jpe?g|png|gif)$/i, //图片文件
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10*1024,
        fallback: {
          loader: 'file-loader',
          options: {
              name: 'images/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体文件
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 49460,
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash:8].[ext]'
          }
        }
      }
    },
  ]},
{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 49460,
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'medias/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
},
// babel-loader是webpack 与 babel的通信桥梁，
// 不会做把es6转成 es5的⼯作，这部分工作需要⽤用到@babel/preset-env来做 ,
// babel/core babel的核心库，提供了很多核心语法
{
  test:/\.js$/,
  use:{
    loader:'babel-loader',
    options:{
      presets:[
        ['@babel/preset-env']
      ]
    }
  }
},

]
},
resolve:{
  // 在组件之间相互引用时我们可以省略后缀    
  //类似import Hello from '../src.components/Hello' 是可以被识别的;
  extensions:['*','.js','.json','.vue'],
  // 配置 别名使用 我们就可以省略 多级目录 比如上面的加入这个配置就可以
  //  写成import Hello from '@components/Hello';

  alias:{
    'vue$':'vue/dist/vue.runtime.esm.js',
    '@':path.resolve(__dirname,'../src'),
    //我们自定义一个别名  通过@img 代替../src/assets/images
    //'@img':path.resolve(__dirname,'../src/assets/images'),

  },
},
// 启用热更新的第二步
devServer: {
  // 这是配置 dev-server 
  open: true, // 自动打开浏览器
  port: 3000, // 设置启动时候的运行端口
  contentBase:path.join(__dirname,'../dist'),//静态文件路径
  hot: true // 启动热更新的第一步
},
// 配置插件
plugins:[    
  // vue加载程序在没有相应插件的情况下使用。确保在Web包配置中包含VueLoaderPlugin。
  new vueLoaderPlugin(),
  // 另外的配置大家可以看官方文档
  new HtmlWebpackPlugin({
    template:path.resolve(__dirname,'../public/index.html'), //html模板所在的文件路径
    filename:'index.html' //输出的html的文件名称
//  inject
// 注入选项。有四个选项值 true, body, head, false.

// true：默认值，script标签位于html文件的 body 底部
// body：script标签位于html文件的 body 底部（同 true）
// head：script 标签位于 head 标签内
// false：不插入生成的 js 文件，只是单纯的生成一个 html 文件


  }),
  // new 一个热更新的模块对象，这是启用热更新的第三步
 new webpack.HotModuleReplacementPlugin(),
//  清除dist文件
 new CleanWebpackPlugin()
]
}

    package.json

    {
  "name": "vue-test",
  "version": "1.0.0",
  "description": "'这是一个webpack配置'",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config build/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config build/webpack.config.js"
  },
  "author": "tehe",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "autoprefixer": "^9.8.5",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.1.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.12.2",
    "less-loader": "^6.2.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.10.4"
  }
}

    github地址
    https://github.com/hegegetellstory1/webpack-hand

    相关文章

      网友评论

          本文标题：手写一个 vue 项目的webpack 的配置 1

          本文链接：https://www.haomeiwen.com/subject/qmskrktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|手写一个 vue 项目的webpack 的配置 1|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！