webpack是一个静态资源打包工具
,它会以一个或多个文件作为打包的入口
,将我们整个项目的文件编译组合成一个或多个文件输出出去
。输出的文件就是编译好的文件,可以运行在浏览器中。一般的我们将webpack输出的文件叫做bundle
随着现在前端技术的发展,我们会使用各种框架(Vue、React),ES6模块化语法、Less/Sass等css预处理器,去提高新开发的效率和程序的健壮性。但是对于这些语法和框架我们的浏览器是不能直接运行的
,需要使用一些打包工具去将代码进行编译
,将其编译成浏览器可以运行的js、css等
语法,才能运行。
此外,使用一些打包工具还可以压缩代码、做一些兼容性处理、提升代码的性能等。
webpack有两种开发模式,这两种开发模式的功能是有限的:
打包文件的入口
,让webpack知道从按个文件开始打包打包的文件要输出到哪里去
,并且如何命名等只能解析js、json等
资源,所以在处于其他资源的时候就需要借助loader
,webpack才能解析扩展webpack的功能
,我们需要下载并且引用它生产模式:production
开发模式:deveplopment
以上内容来自:
entry
默认值是 ./src/index.js
,但你可以通过在 webpack configuration 中配置 entry
属性,来指定一个(或多个)
不同的入口起点
。
webpack.config.js
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
},
};
也可以简写为:
module.exports = {
entry: './path/to/my/entry/file.js',
};
在你想要一次注入多个依赖文件,并且将它们的依赖关系绘制在一个 “chunk” 中时,我们就可以将一个文件路径数组传递给 entry 属性
webpack.config.js
module.exports = {
entry: ['./src/file_1.js', './src/file_2.js'],
output: {
filename: 'bundle.js',
},
};
output
output 属性告诉 webpack 在哪里输出
它所创建的 bundle,以及如何命名
这些文件。主要输出文件的默认值是 ./dist/main.js
,其他生成文件默认放置在./dist
文件夹中。
webpack.config.js
const path = require('path')
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname,'dist),
filename: 'my-first-webpack.bundle.js'
}
}
上面示例,分别通过output.path
和output.filename
属性来设置文件输出位置
以及输出文件的名称
。
webpack 只能理解 JavaScript 和 JSON 文件
,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件
,并将它们转换为有效 模块
,以供应用程序使用,以及被添加到依赖图中。
在更高层面,在 webpack 的配置中,loader 有两个属性:
test
属性,识别出哪些文件会被转换。use
属性,定义出在进行转换时,应该使用哪个loader注:loader是在module下的rules
属性下进行配置
webpack.confis.js
const path = require('path')
module.exports = {
entry: '',
output: {
path: '',
filename: ''
},
module: {
rules: [{
test: '/\.txt$/',
use: 'raw-loader'
}],
},
}
以上配置中,对一个单独的module
对象定义了rules
属性,里面包含两个必须属性:test
和use
。这告诉webpack编译器,当遇到require或者import
语句中被解析为 '.txt'
的路径时,在对它进行打包前,先use(使用)raw-loader
转换一下。
示例一
使用loader告诉webpack加载css文件,或者将TypeScript转为JavaScript。为此首先安装相对应的loader。
npm install --save-dev css-loader ts-loader
然后指示webpack对每个.css
使用css-loader
,以及对所有的.ts
文件使用ts-loader
webpack.config.js
module.exports = {
module: {
relus: [
{test: /\.css$/,use: 'css-loader'},
{test: /\.ts$/,use: 'ts-loader'},
]
}
}
示例二
module.rules
允许你在webpack配置中指定多个loader。loader从左到右(或从下到上)
的取值执行。在下面示例中,从sass-loader
开始执行,将scss/sass文件编译成普通的css文件
,然后继续执行css-loader,css-loader会对css文件进行解析处理
,最后执行style-loader,style-loader会将css样式嵌入到html中
。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
option: {
modules: true // modules: true选项意味着它会将CSS类名转换为唯一的哈希值,这样可以避免在项目中的CSS样式冲突。
}
},
{
loader: 'sass-loader'
}
]
}
]
}
}
loader用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。想要使用一个插件,只需要require()
它,然后把它添加到plugin
数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的的而多次使用同一个插件,这时要通过new
操作符来创建一个插件实例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};
由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入一个 new 实例。
ProgressPlugin
用于自定义编译过程中的进度报告,HtmlWebpackPlugin
将生成一个 HTML
文件,并在其中使用 script
引入一个名为 my-first-webpack.bundle.js
的 JS 文件。
通过选择development
,production
或none
之中的一个,来设置mode
参数,你可以启用webpack内置在相应环境下的优化,其默认值为production
module.exports = {
mode: 'production'
}
vue.config.js
是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它就会被@vue/cli-service
自动加载。你也可以使用package.json
中的vue
字段,但是注意这种写法需要你严格遵守JSON的格式来写。
这个文件应该导出一个包含了选项的对象:
vue.config.js
module.exports = {
// 选项
}
vue.config.js
或者,也可以使用@vue/cli-service
提供的defineConfig
帮手函数,以获得更好的类型提示:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 选项
})
部署时的基本 URL
类型:string
默认值:“/”
用法和 webpack 本身的 output.publicPath
一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath
而不要直接修改 webpack 的 output.publicPath
。
默认情况下,vue-cli 会假设你的应用是被部署在一个域名的根路径
上,例如https://www.baidu.com/
。如果部署在一个子路径上,你就需要用这个选项指定这个子路径。例如你要部署在https://www.baidu.com/other/
则设置publicPath
为/other/
。
publicPath
这个值也可以设置为(' ')
或是相对路径(' ./ ')
,这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。
vue.config.js
// 这个值在开发环境下同样生效
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
打包后生成的文件夹目录
类型: string
默认值:dist
当运行vue-cli-service build
时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除(构建时传入--no-clean
可关闭该行为)
放置生成的静态资源的目录
类型:string
默认值:‘’
放置生成的静态资源(js、css、img、fonts)的(相对于outputDir
的)目录
生成的index.html的输出路径
类型:string
默认值: index.html
指定生成的 index.html
的输出路径 (相对于 outputDir
)。也可以是一个绝对路径。
文件名是否包含哈希
类型:string
默认值:true
默认情况下,生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。然而,这也要求index的html是被vue cli自动生成的。如果你无法使用vue cli生成index html,你可以通过将这个选项设为false
来关闭文件名哈希。
source map
,可以将其设置为false
以加速生产环境构建。multi-page
模式下构建应用,每个page应该有一个对应的JavaScript入口文件。其值应该是一个对象,对象的key是入口的名字,value是:entry
、template
、filename
、title
和chunks
的对象(除了entry
之外都是可选的);entry
的字符串vue.config.js
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
PostCSS
、CSS Modules
和包含 Sass
、Less
、Stylus
在内的预处理器。1、引用静态资源
所有编译后的 CSS 都会通过 css-loader
来解析其中的 url()
引用,并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm
依赖中的文件,或是想要用 webpack alias
,则需要在路径前加上 ~
的前缀来避免歧义。
2、预处理器
你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus
)。如果当时没有选好,内置的 webpack
仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader
:
// Sass
npm install -D sass-loader sass
// Less
npm install -D less-loader less
// Stylus
npm install -D stylus-loader stylus
然后你就可以导入相应的文件类型,或在 *.vue 文件中这样来使用:
自动化导入
如果你想自动化导入文件 (用于颜色、变量、mixin……),你可以使用 style-resources-loader
。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl
的例子:
// vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
},
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/imports.styl'),
],
})
}
PostCSS
你可以通过 .postcssrc
或任何 postcss-load-config
支持的配置源来配置 PostCSS
。也可以通过 vue.config.js
中的 css.loaderOptions.postcss
配置 postcss-loader
。
CSS Modules
如果你希望自定义
生成的 CSS Modules
模块的类名,可以通过 vue.config.js
中的 css.loaderOptions.css
选项来实现。所有的 css-loader
选项在这里都是支持的,例如 localIdentName
和 camelCase
:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {
// 注意:以下配置在 Vue CLI v4 与 v3 之间存在差异。
// Vue CLI v3 用户可参考 css-loader v1 文档
// https://github.com/webpack-contrib/css-loader/tree/v1.0.1
modules: {
localIdentName: '[name]-[hash]'
},
localsConvention: 'camelCaseOnly'
}
}
}
}
或
css: {
extract: {
// 打包后css文件名称添加时间戳
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/chunk.[id].${timeStamp}.css`
},
loaderOptions: {
less: {
modifyVars: {
/* less 变量覆盖,用于自定义 ant design 主题 */
'primary-color': '#1890FF',
'link-color': '#1890FF',
'border-radius-base': '4px',
'layout-color': '#9867f7'
},
javascriptEnabled: true
}
}
},
向预处理器 Loader 传递选项
有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js
中的 css.loaderOptions
选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意:在 sass-loader v8 中,这个选项名是 "prependData"
additionalData: `@import "~@/variables.sass"`
},
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `prependData` 选项的时候
// `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
// 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
scss: {
additionalData: `@import "~@/variables.scss";`
},
// 给 less-loader 传递 Less.js 相关选项
less:{
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: '#fff'
}
}
}
}
}
webpack-dev-server
的选项都支持,注意:host
、port
和https
可能会被命令行参数覆写publicPath
和historyApiFallback
不应该被改写,因为它们需要和开发服务器的publicpath
同步以保障正常的工作。dev环境下,webpack-dev-server相关配置
类型:string/Object
如果你的前端应用和后端API服务器没有运行在同一个主机上,你需要在开发环境下将API请求代理到API服务器
。这个问题可以通过vue.config.js
中的devServer.proxy
选项来配置。
devServer.proxy
可以是一个指向开发环境API服务器的字符串
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
module.exports = {
devServer: {
proxy: {
port: 8090,
host: '0.0.0.0',
https: false,
open: true,
}
}
}
0.0.0.0
,在同一个局域网下,如果你的项目在运行,同时可以通过你的 http://ip:port/...
访问你的项目npm run serve
时是否直接打开浏览器这会告诉开发服务器将任何未知请求(没有匹配到静态文件的请求)代理到http://localhost:4000
如果你想要更多的代理控制行为,也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。
module.exports = {
// 反向代理
devServer: {
index: '/login.html', // 默认打开文件
open: true, // 自动打开浏览器
host: 'localhost', // 默认打开域名
port: 8080, // 默认打开端口号
https: false, // 开启关闭https请求
hotOnly: false, // 热更
proxy: {
// 配置跨域
'/api': {
target: 'http://dev.aabb.cn:8082/', // 代理地址,这里设置的地址会代替axios中设置的baseURL
ws: true, // proxy websockets
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: { // pathRewrite方法重写url
'^/api': '/',
},
},
},
},
}
示例
vue.config.js
module.exports = {
publicPath: "./", // 公共路径 默认为"/",建议使用"./"相对路径
devServer: { // 本地服务器配置(npm run serve)
port: 8080, // 端口
host: "localhost", // 域名
https: false, // 是否开启https
open: true // 是否在开启服务器后自动打开浏览器访问该服务器
},
lintOnSave: false, // 取消lint语法检测,此处可不配置
outputDir:"dist", // build打包输出目录
assetsDir:"assets", // 静态文件输出目录,基于dist
indexPath: "index.html", // 输出html文件名
productionSourceMap: false, // 取消.map文件的打包,加快打包速度
configureWebpack: (config) => {
// process.env为环境变量,分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
if (process.env.NODE_ENV !== 'production') return;
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false; //生产环境去掉console.log
return { // 此处配置webpack.config.js的相关配置
plugins: [],
performance: {}
};
}
};
在vue.config.js,如果要新增/修改webpack的plugins或者rules,有两种方式。
configgureWebpack方式
module.exports = {
configureWebpack: {
rules: [],
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
configureWebpack: (config) => {
// 例如,通过判断运行环境,设置mode
config.mode = 'production'
}
chainWebpack方式
module.exports = {
chainWebpack: config => {
config.entryPoints.clear() // 把默认的入口清空
config.entry('entry1').add('./src/index1.tsx') // 新增入口
config.entry('entry2').add('./src/index2.tsx') // 新增文件
config.output
.path("dist")
.filename("[name].[chunkhash].js")
.chunkFilename("chunks/[name].[chunkhash].js")
.libraryTarget("umd")
}
}
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('static',resolve('src/static'))
.delete('static') // 删掉指定的别名
}
}
module.exports = {
chainWebpack: config => {
config.module
.rule(name)
.use(name)
.loader(loader)
.option(option)
}
}
示例
module.exports = {
chainWebpack: config => {
config.module
.rules('ts')
.test(/\.tsx?/)
.use('ts-loader')
.loader('ts-loader')
.option({
transpileOnly: true
})
.end()
}
}
tap
方法修改loader的参数:module.exports = {
chainWebpack: config => {
config.module
.rule('ts')
.test(/\.tsx?/)
.use('ts-loader')
.loader('ts-loader')
.tap(option => {
// do some ...
return option
})
.end()
}
}
在所有的配置完成之后,可以通过调用config.toConfig()
来拿到最后的配置对象,可以直接作为webpack
的配置。
uses
对象的delete
方法,根据loader
的name
删除module.exports = {
chainwebpack: config => {
config.module
.rule('ts')
.test(/\.tsx?/)
.uses.delete('ts-loader')
}
}
先指定名字
(这个名字是自定义的),然后通过 use 添加插件
数组
,也可以不传。// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin(name)
.use(WebpackPlugin, args)
}
}
示例
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
chainWebpack: config => {
config
.plugin('extract')
.use(ExtractTextPlugin, [{
filename: 'build.min.css',
allChunks: true,
}])
}
}
module.exports = {
chainWebpack: config => {
config.plugins.delete('extract')
}
}
例如,现在需要指定 html-webpack-plugin
这个插件在刚刚写的 extract 插件之前
执行,则写法如下:
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.use(htmlWebpackPlugin)
.before('extract')
}
}
通过 before
方法,传入另一个插件的 name 即可,表示在另一个插件之前执行。
同样,如果需要在 extract 插件之后执行,调用 after
方法
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.use(htmlWebpackPlugin)
.after('extract')
}
}
tap
方法修改参数module.exports = {
chainWebpack: config => {
config
.plugin(name)
.use(webpackPluginName)
.tap(args => newArgs)
}
}
init
方法,返回一个实例,这将代替原有的实例化过程module.exports = {
chainWebpack: config => {
config
.plugin(name)
.init((Plugin, args) => new Plugin(...args));
}
}