关于 webpack的总结
2024-09-06 11:33:01
一 . 几个基本的概念
1. mode开发模式
// webpack.production.config.js
module.exports = {
mode: 'production' // 生产模式 此时压缩代码等 development 为开发模式 此时会开启 sourseMap
}
2. 入口文件(entry)
打包的起点 可以是一个 当然也可是多个
module.exports = {
entry: './path/to/my/enrty/file.js'
}
3. 输出(output) 就是告诉webpack 在哪里输出它所创建的 bundles, 以及如何命名这些文件, 默认值为 ./dist
const path = require('path')
module.exports = {
entry: './path/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
}
4. loader webpack 自身只会处理js 所以处理css .vue 等文件就需要各自对应的 loader
// 先npm安装 后使用
const path = require('path')
const config = {
output: {
filename: 'my-first.js'
},
module: {
rules: [
{test: /\.txt$/, use: 'raw-loader'}
]
}
}
// “嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”
5. 插件(plugins)
说明: loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
const HtmlWebpackPlugin = require('html-webpack-plugin') // npm安装后 引用
const webpack = require('webpack') // 用于访问内置插件
const config = {
module: {
rules: [
{test: /\.txt$/, 'raw-loader'}
],
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
}
module.exports = config
二. 入口起点(entry points)
最新文章
- python非递归全排列
- 从多个XML文档中读取数据用于显示webapi帮助文档
- SQL Server数据库表重置自增主键号（通常是指ID）
- 学习之路三十五：Android和WCF通信 - 大数据压缩后传输
- centos Linux 统计某个文件夹占用空间大小
- PetaPoco.Core.ttinclude修改
- 更有效率的使用Visual Studio（一）
- javascript异步延时载入及推断是否已载入js/css文件
- [转载]MongoDB优化的几点原则
- javascript笔记整理（对象遍历封装继承）
- MySQL意外关闭， 导致软件崩溃而无法启动的解决办法
- Glide图片加载框架小bug
- laravel5.8笔记八：数据库（单库和多库）
- ANN算法总结
- What happens to our code? JavaScript 代码是怎样执行的
- WPF学习笔记（3）——style
- 求字符串长度StringLength();
- github删除仓库
- zookeeper分布式算法和部署
- nodejs与c语言交互应用实例