【Webapck学习】
1、webpack是什么
Webpack是一个前端模块化方案,更侧重于模块打包。我们可以把开发中的所有资源(图片,js,css,字体等)
都看成模块,通过loader和plugins对资源进行处理,打包成符合生产环境部署的前端资源
- 初始化项目,得到package.json文件
npm init -y
- 安装webpack, webpack-cli
npm install webpack webpack-cli
- 使用webspack打包
npx webpack
- 查看打包细节
npx webpack --stats detailed
- 查看webpack终端命令有哪些
npx webpack --help
- 命令行不方便,通过配置文件来配置 webpack.config.js,执行npx webpack就可以
const path = require('path')
module.exports = {
entry: './src/index.js', //打包入口
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, './dist'),// 输出文件夹必须定义为绝对路径
clean: true, // 打包前清理dist文件夹
},
mode: 'none'
}
2、插件|Plugins
插件是webpack的核心功能。可以用于执行一些特定的任务,包括:打包优化,资源管理,注入环境变量等。
webpack自身也是构建于你在webpack配置中用到的相同的插件协同。可以完成Loader
无法完成的其它任务。
01、使用HtmlWebpackPlugin
- 作用: 一个服务于bundles的、用于简化HTML文件生成的插件
- 安装:
yarn add --dev html-webpck-plugin
- 配置:
plugins: [
new htmlWebpackPlugin({
filename: 'app.html', // 生成的文件名
template: path.resolve(__dirname, './index.html'), // 源文件的绝对路径
inject: 'body' // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false,默认值为 true
})
]
3、搭建开发环境
- 设置mode:
mode: 'development', // 开发模式
- 使用sourcemap:
devtool: 'inline-source-map', // 开发模式下追踪代码,生成的sourcemap文件,会内嵌在bundle.js中
当 webpack 打包源代码时,可能会很难追踪到 error(错误) 和 warning(警告) 在源代
码中的原始位置。例如,如果将三个源文件( a.js , b.js 和 c.js )打包到一个
bundle( bundle.js )中,而其中一个源文件包含一个错误,那么堆栈跟踪就会直
接指向到 bundle.js 。你可能需要准确地知道错误来自于哪个源文件,所以这种提
示这通常不会提供太多帮助。
为了更容易地追踪 error 和 warning,JavaScript 提供了 source maps 功能,可以
将编译后的代码映射回原始源代码。如果一个错误来自于 b.js ,source map 就会
明确的告诉你。 - 使用watch mode(观察者模式):
npx webpack --watch
在 webpack 启动时添加 “watch” 参数。如果其中一个文件被更新,代码将
被重新编译,所以你不必再去手动运行整个构建 - 使用webapck-dev-server:
-
- 安装:
npm install webpack-dev-server -D
- 安装:
-
- 配置:
devServer: { static: './dist' }
以上配置告知 webpack-dev-server ,将 dist 目录下的文件作为 web 服务的根目
录。
- 配置:
-
- 运行:
npx webpack server --open
webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文
件保留在内存中,然后将它们 serve 到 server 中,就好像它们是挂载在 server
根路径上的真实文件一样。
- 运行:
4、loader
1、loader是什么?
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用loader进行转换。
Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。
在Webpack中,Loader是一种用于转换不同类型文件的中间件。它们的主要任务是将源文件转换为模块,以便将它们添加到Webpack的依赖图中。
Loader将源文件作为输入,对其进行处理,然后输出转换后的文件。这些处理可以包括编译、压缩、转译、转换和其他自定义操作。最终,这些文件将被合并到Webpack的输出中。
2、安装loader
npm install babel-loader style-loader css-loader file-loader --save-dev
3、配置loader
loader有两个属性
- test 属性,识别出哪些文件会被转换。
- use 属性,定义出在进行转换时,应该使用哪个 loader。
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
],
},
]
}
loader 从右到左(或从下到上)地取值(evaluate)/执行(execute)。在下面的示例中,从 sass-loader 开始执行,然后继续执行 css-loader,最后以 style-loader 为结束。
4、loader特性
- loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果(也就是应用过转换后的资源)传递给下一个 loader,依此类推。最后,链中的最后一个 loader,返回 webpack 所期望的 JavaScript。
- loader 可以是同步的,也可以是异步的。
- loader 运行在 Node.js 中,并且能够执行任何操作。
- loader 可以通过 options 对象配置(仍然支持使用 query 参数来设置选项,但是这种方式已被废弃)。
- 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader,还可以在 module.rules 中使用 loader 字段直接引用一个模块。
- 插件(plugin)可以为loader带来更多特性。
- loader 能够产生额外的任意文件。
可以通过 loader 的预处理函数,为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑,例如:压缩、打包、语言转译(或编译)和 更多其他特性。
5、webpack.config.js文件
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),// 输出文件夹必须定义为绝对路径
clean: true, // 打包前清理dist文件夹
},
plugins: [
new htmlWebpackPlugin({
filename: 'app.html', // 生成的文件名
template: path.resolve(__dirname, './index.html'), // 源文件的绝对路径
inject: 'body' // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false,默认值为 true
})
],
mode: 'development', // 开发模式,
devtool: 'inline-source-map', // 开发模式下追踪代码,生成的sourcemap文件,会内嵌在bundle.js中
devServer: {
static: './dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.less$/,
use: [
'style-loader', 'css-loader','less-loader'
]
},
{
test: /\.(png|jpg|gif)$/, // 把图片处理为url的数据
// 如果loader只有一个,只传递一个字符串即可
use : 'url-loader?limit=4734'
}
],
}
}
6、package.json文件
{
"name": "01_html_js",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack",
"detail": "npx webpack --stats detailed",
"dev": "npx webpack server --open"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
},
"devDependencies": {
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.0",
"less-loader": "^11.1.3",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"url-loader": "^4.1.1",
"webpack-dev-server": "^4.15.1"
}
}
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!