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

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

手写一个vue的webpack配置
手写一个 react的项目webpack 实践
手写一个webpack的脚手架
我们经常在项目中遇到修改webpack的配置，但是只是单纯的依靠脚手架，现在我们由易到难，手敲一下我们的vue 的webpack 配置代码，希望对大家有所帮助

首先熟悉一下webpack的构建流程

初始化
通过 yargs 解析 config 与 shell 中的配置项，生成compiler 对象
执行编译
通过生成的compiler对象，加载我们所有的配置和插件，开启run 方法开始编译
查找入口
找到所有的配置文件
编译模块
调用模块加载器（loader）对所有模块进行编译
编译并输出资源
编译完成后得到得到每个模块的编译后的内容和各模块的依赖关系，组合成包含多个模块的chunk，并把chunk转化为文件加入到输出列表
输出完成
确定好文件的输出路径，根据配置确定输出的路径和文件名字

熟悉了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 文件

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

启程

初始化项目

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



修改public  下面的index.html  挂载 app



  
  
  
  app


  



修改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

你可能感兴趣的:(手写一个 vue 项目的webpack 的配置 1)