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

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

  • 手写一个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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 227,401评论 6赞 531
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 98,011评论 3赞 413
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 175,263评论 0赞 373
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 62,543评论 1赞 307
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 71,323评论 6赞 404
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 54,874评论 1赞 321
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 42,968评论 3赞 439
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 42,095评论 0赞 286
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 48,605评论 1赞 331
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,551评论 3赞 354
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,720评论 1赞 369
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 38,242评论 5赞 355
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 43,961评论 3赞 345
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,358评论 0赞 25
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,612评论 1赞 280
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 51,330评论 3赞 390
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 47,690评论 2赞 370