1.为什么需要webpack
- css预处理器如less、sass等浏览器不支持
- 部分低版本浏览器不支持es6语法，需要转换为es5语法，为浏览器使用
- 项目依赖过多，文件过多，需要将复杂的代码结构转换为细化
- 模块化开发，保留单个模块的可维护性，又减少了http请求数，优化加载速度
2.什么是webpack
webpack是前端打包工具，通过分析所在项目的目录结构，找到模块及各模块间的依赖关系，且将浏览器不能直接运行的语言如typescript、css预处理器语法（less、sass）等或者因为浏览器因为版本底不支持新的内置函数，需要将其转换及打包成浏览器支持格式
- 模块合并打包
- 代码转换
- 文件优化
接下来介绍下vue不同版本脚手架webpack使用配置的区别
3.webpack的使用
3.1 vue脚手架中的webpack目录结构
左图项目结构为vue-cli 2x版本脚手架生成的项目,build文件夹包含了webpack配置
右图项目结构为vue-cli 3x版本脚手架生成的项目,3x版本并不存在该文件，而是将其配置集成到vue.config.js中
3.2 webpack配置（vue-cli 2x）
3.2.1 配置文件
webpack配置文件有三个
- webpack.dev.conf.js （ 开发环境运行的webpack配置文件 ）
- webpack.prod.conf.js （ 生产环境运行的webpack配置文件 ）
- webpack.base.conf.js （ webpack的基础配置文件，前两者都需要依赖它 ）
针对不同环境的配置，运行不同的配置文件
（1）webpack.base.conf.js 结构
代码语言：javascript复制'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader', {
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
overrideBrowserslist: ['last 2 versions', '>1%']
})
]
}
}]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: '首页',
template: 'index.html',
filename: 'index.html'
}),
new CleanWebpackPlugin(),
]
}
涉及到的配置知识
- entry - 让 webpack 知道使用哪个模块，来作为构建其内部依赖图的开始
- output - 让 webpack 知道在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
- loader - 处理浏览器不能直接运行的语言,可以将所有类型的文件转换为 webpack 能够处理的有效模块 ( 如上图 vue-loader用于解析和转换 .vue 文件,babel-loader 用于转换浏览器因不兼容es6写法的转换 常见loader还有TypeScript、Sass、Less、Stylus
babel-loader：解析 .js 和 .jsx 文件
tsx-loader：处理 ts 文件
less-loader：处理 less 文件，并将其编译为 css
sass-loader：处理 sass、scss 文件，并将其编译为 css
postcss-loader：// 解析CSS文件并且添加浏览器前缀到 CSS 内容里
module.exports = {
plugins: [require('autoprefixer')],
};
css-loader：处理 css 文件
style-loader：将 css 注入到 DOM
file-loader：将文件上的import / require 解析为 url，并将该文件输出到输出目录中
url-loader：用于将文件转换成 base64 uri 的 webpack 加载程序
html-loader：将 HTML 导出为字符串， 当编译器要求时，将 HTML 最小化
- plugins - 通过插件引入来处理，用于转换某种类型的模块，可以处理：打包、压缩、重新定义变量等
webpack官方文档链接
