webpack
webpack配置
写在前面：官网解释到，webpack 是一个基于node.js的模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)
https://webpack.docschina.org/guides/getting-started/
（练习放在workspce/demo/webpack_demo）
一些基础知识：
@H_404_14@const path = require('path'); //Commonjs语法规范
module.exports = {
entry: './path/to/my/entry/file.js', //入口起点，可多入口，默认值是 ./src/index.js
output: {
// 我们使用 Node 内置的 path 模块，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作
path: path.resolve(__dirname, 'dist'), //我们想要 bundle 生成(emit)到哪里，path为nodeJS核心模块
filename: 'my-first-webpack.bundle.js', //webpack bundle 的名称
// 还有其他可配置信息 https://webpack.docschina.org/configuration/output/
},
};
//官方
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: { //要定义在 module.rules 而不是 rules 中
//当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 use(使用) raw-loader 转换一下
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
// 自己写的扩展
module: {
loaders: [
{
//key-value形式只能写在对象中
//style-loader css-loader
//遇到后缀为.css的文件时，先用css-loader解析main.js，再用style-loader生成一个<style>标签
test:/\.css$/, //正则表达式
loader:"style-loader!css-loader" //先用css-loader解析main.js，再用style-loader生成一个<style>标签
// use:['style-loader','css-loader']
},
{
//webpack将各模块打包成一个文件，因此样式中的url路径是相对入口html页面的，而不是相对于原始css文件的路径，会导致图片引入失败。
// 用file-loader可以解析项目中的url引入
// 对小图，使用base64编码就可以减少一次图片的网络请求；
// 而对比较大的图片，若使用base64，编码就会和html混在一起，可读性差，并加大了html页面的大小，该图片也被编译到build.js中了
test:/\.(jpg|png|jpeg|gif|svg)$/,
loader:'url-loader?limit=10000' //带一个参数，与图片大小有关，查询参数limit,大于limit会生成一个base64的编码的jpg文件；小于的化就直接是图片文件
}
]
}
// 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
// 多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，
// 这时需要通过使用 new 操作符来创建一个插件实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
// html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle
}
module.exports = {
mode: 'production',
}
官方起步配置步骤
https://webpack.docschina.org/configuration/
快速生成：npx webpack-cli init
- 新建项目文件夹mkdir webpack-demo；cd webpack-demo，然后npm init -y
- npm install webpack webpack-cli --save-dev 安装webpack和webpack-cli并保存到package.json，使用开发环境
- 新建目录结构index.html, src/ index.js；在package.json中删除"main": “index.js”,添加"main": “index.js”。以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码
- 调整目录结构，将index.html——>dist/index.html; 然后npm install --save lodash安装lodash（安装lodash是因为 js脚本的执行依赖于外部库。 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码）
- 修改dist/index.html为如下，执行 npx webpack（Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，用于还未设置npm，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即./node_modules/.bin/webpack））。此时，在浏览器中打开 dist 目录下的 index.html，如果一切正常，你应该能看到以下文本：‘Hello webpack’
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title>起步</title>
<!-- <script src="https://unpkg.com/[email protected]"></script>-->
</head>
<body>
<!--<script src="../src/index.js"></script>-->
<script src="main.js"></script>
</body>
</html>
- 创建webpack.config.js（在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多）。然后在package.json的“script”中添加"build": “webpack”，此时可以npm run build来运行项目
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
网上的webpack构建步骤：
https://blog.csdn.net/qq_39239110/article/details/90408644
- 新建一个demo文件夹，$npm init -y 命令创建一个package.json文件
- demo文件夹下创建src/main.js和index.html，然后打包，使用命令webpack ./src/main.js -o ./dist/bundle.js
- 安装webpack和webpack-cli: npm i webpack -D; npm i wepback-cli -D
- 安装webpack-dev-server（自动打包工具）使用命令：npm i webpack-dev-server -D --save；并且到package.json文件下进行配置：script:{“dev”:“webpack-dev-serve --open --port 8000 --contenBase src --hot”}
- 在根目录下创建webpack.config.js（下面详细介绍）
- 运行项目 npm run dev（基本差不多，只在package.json文件有些区别）
配置加载css
// 模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。
// - 第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。
// - 必须保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。
module: {
rules: [
{
// 所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
// 类似的，加载image图像，因为有内置 Asset Modules ，所以不需要安装库文件
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
// 当然，字体文件Asset Modules也能处理
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
//还有加载数据，CSV、TSV 和 XML，详见官网
],
},
注意：在使用webpack工具时，其只会对JS和JSON文件生效，必须配置loader来实现配置css文件
管理输出
该部分优化dist/ index.html的js模块的手动引入
（详见官网，先创建print.js,再设置index.html，最后设置webpack.config,js的entry）
可以在output中加clean: true来自动清理dist中的旧文件
该插件可以管理index.html，如title等，安装完需要设置webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: '管理输出',
}),
],
持续更新
打算手动配一遍webpack,内容还有很多（修改自动编译等），具体如下：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
