一份自用的webpack配置文件及其配置说明
2024-10-21 06:14:04
1.webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
// 配置页面入口 js 文件
entry: './src/main.js',
// 配置打包输出相关
output: {
// 打包输出目录
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
//打包后的文件名
//name是entry名字main
//hash根据打包后的文件内容计算出来的一个hash值
filename: '[name].[hash:8].js',
},
module: {
/*
配置各种类型文件的加载器，称之为 loader
webpack 当遇到 import ... 时，会调用这里配置的 loader 对引用的文件进行编译
*/
rules: [{
/*
使用 babel 编译 ES6 / ES7 / ES8 为 ES5 代码
使用正则表达式匹配后缀名为 .js 的文件
*/
test: /\.js$/,
use: 'babel-loader',
// 排除 node_modules 目录下的文件，npm 安装的包不需要编译
exclude: /node_modules/
},
{
// 匹配 css 文件
test: /\.css$/,
/*
先使用 css-loader 处理，返回的结果交给 style-loader 处理。
css-loader 将 css 内容存为 js 字符串，并且会把 background, @font-face 等引用的图片，
字体文件交给指定的 loader 打包。
*/
use: ['style-loader', 'css-loader'],
},
{
// 匹配 scss 文件
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader', ],
},
{
/*
匹配各种格式的图片和字体文件
上面 html-loader 会把 html 中 <img> 标签的图片解析出来，文件名匹配到这里的 test 的正则表达式，
css-loader 引用的图片和字体同样会匹配到这里的 test 条件
*/
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
/*
使用 url-loader, 它接受一个 limit 参数，单位为字节(byte)
当文件体积小于 limit 时，url-loader 把文件转为 Data URI 的格式内联到引用的地方
当文件大于 limit 时，url-loader 会调用 file-loader, 把文件储存到输出目录，并把引用的文件路径改写成输出后的路径
比如
<img src="smallpic.png">
会被编译成
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA...">
而
<img src="largepic.png">
会被编译成
<img src="/f78661bef717cf2cc2c2e5158f196384.png">
*/
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}
]
},
resolve: {
alias: {
//路径别名
'@': path.resolve(__dirname, 'src'),
},
extensions: ['*', '.js', '.json']
},
devServer: {
/*
启用 noInfo 后，诸如「启动时和每次保存之后，
那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
*/
noInfo: true,
//当存在编译器错误或警告时，是否在浏览器中全屏显示。
overlay: true,
//在编译时只显示错误信息
stats: 'errors-only',
//服务器返回给浏览器的时候是否启动gzip压缩
compress: true,
//指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，可设置为0.0.0.0
host: 'localhost',
port: 8089
},
plugins: [
/*
template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译，
webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader
html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html
可以通过 filename 参数指定输出的文件名
html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。
*/
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
hash: true, // 会在引入的js里加入查询字符串避免缓存,
}),
//clean-webpack-plugin插件可在每次打包时清空dist文件夹
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./dist'],
})
],
/*
配置 source map
开发模式下使用 cheap-module-eval-source-map, 生成的 source map 能和源码每行对应，方便打断点调试
生产模式下使用 hidden-source-map, 生成独立的 source map 文件，并且不在 js 文件中插入 source map 路径
*/
devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : 'hidden-source-map',
/*
建议每个输出的 js 文件的大小不要超过 250k。
但开发环境因为包含了 sourcemap 并且代码未压缩所以一般都会超过这个大小，所以我们可以在开发环境把这个 warning 关闭。
*/
performance: {
hints: process.env.NODE_ENV === 'development' ? false : 'warning'
},
//表示监控源文件的变化，当源文件发生改变后，则重新打包
watch: true,
watchOptions: {
ignored: /node_modules/,
poll: 1000, //每秒钟询问的次数
aggregateTimeout: 500
}
}
2.package.json
{
"name": "nanliangrexue",
"description": "nanliangrexue",
"license": "MIT",
"scripts": {
"dev": "cross-env NODE_ENV = development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV = production webpack --progress --hide-modules"
},
"dependencies": {
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"style-loader": "^0.20.3",
"file-loader": "^1.1.4",
"url-loader": "^1.1.2",
"sass-loader": "^7.1.0",
"node-sass": "^4.10.0",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1",
"clean-webpack-plugin": "^0.1.19",
"html-webpack-plugin": "^3.0.6"
},
"babel": {
"presets": [
"env",
"stage-3"
]
}
}
（完）
最新文章
- 通过三次优化，我将gif加载优化了16.9%
- O(n) 筛法求素数
- 金士顿U盘，群联PS2251-60主控，量产还原教程
- CSS总结1
- Azure 意外重启, 丢失sql server master表和 filezilla
- 在Android中查看和管理sqlite数据库
- js仿手机端九宫格登录功能
- if/else语句匹配问题
- Git在下搭建下环境的工具
- mysql 中文乱码
- python3.6安装PyQt5
- Kafka、ActiveMQ、RabbitMQ、RocketMQ 区别以及高可用原理
- FT View SE联合Studio 5000仿真
- NoteBook学习（二）-------- Zeppelin简介与安装
- STM32-跑马灯实验
- centos7下安装docker（18.1docker日志---logging driver）
- RDD
- Codeforces Round #449 Div. 1
- Android深入四大组件（七）Service的绑定过程
- 不同CSS技术及其CSS性能