webpack基本使用
这里所有都是基于webpack4的学习
为什么要使用webpack
web开发的困境：文件依赖关系复杂；静态资源请求效率低下；模块化支持不友好；浏览器对高级js兼容性不友好
而webpack可以解决这些问题
基本打包使用
1）npm i webpack webpack-cli -D
2) 在项目根目录中创建 webpack.config.js 文件
3）配置webpack.config.js文件
基本配置：
const path = require("path");
module.exports = {
mode: "development",
entry: path.join(__dirname, "./src/all.js"), // 打包入口，默认为src/index.js
output: { // 打包生成的文件，默认生成main.js放在根目录的dsit文件夹中
path: path.join(__dirname, "./dist"),
filename: "bundle.js",
},
};
mode模式主要后开发模式和生产模式，开发模式打包不会对代码进行压缩和混淆，所以打包更快，生产模式打包会对代码进行压缩和混淆，他的打包后体积更小
- 在package.json配置脚本**
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack" // 新增
},
5) 运行dev脚本 npm run dev
实例：
项目根目录的src文件夹下有三个文件
es6.js文件
const test = "hello";
export { test };
test.js文件，主要是实现隔行变色的效果
import { test } from "./es6.js";
(function () {
let lis = document.querySelectorAll("li");
console.log(test);
for (let i = 0; i < lis.length; i++) {
if (i % 2 !== 0) {
lis[i].style.backgroundColor = "red";
} else {
lis[i].style.backgroundColor = "green";
}
}
})();
index.js文件
<body>
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
<li>第7个</li>
<li>第8个</li>
</ul>
<script src="./all.js"></script>
<!-- <script src="../dist/bundle.js"></script> -->
</body>
这样在浏览器中打开index.html会报错，原因是浏览器对es6模块化语法支持不太好，而我index.js中引入了es6.js文件
而23webpack可以帮我们解决这个问题，我们配置好webpack后，执行npm run dev 命令，引入打包后的js文件，就可以解决报错，看到隔行变色效果
自动打包
上面的打包不会自动打包，当我修改了all.js文件，需要重新运行脚本 npm run dev 才能看到最新的效果，每次修改都需要手动打包才能看到效果，为了解决这个问题，我们需要添加写配置
// 1 安装 webpack-dev-server
npm i webpack-dev-server -D
// 2 修改package.json脚本
"dev": "webpack-dev-server"
// 3 修改进入的打包文件的路径
<script src="/bundle.js"></script>
注意：webpack-dev-server 会启动一个实时的http服务器；
打包生成的输出文件，默认放在了项目过呢目录中，而且是虚拟的，看不见的
文件默认被托管再了http://localhost:8080/,打开我们就可以看到这些文件了，打开index.html就可以看到隔行变色，更改文件，视图也会即使更新，实现了自动打包
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-um5oUY7J-1641204223470)(C:\Users\lucas\Desktop\学习\图片\afterPackage.jpg)]
这里我遇到了点问题：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q4quFBXZ-1641204223472)(C:\Users\lucas\Desktop\学习\图片\webpack-dev-server-err.jpg)]
记得安装匹配的版本，webpack-cli全局装了还不行，我有 npm i webpack-cli -D 装了一遍
我最终选择的版本 “webpack-cli”: “^3.2.1”, “webpack-dev-server”: “^3.1.14”
自动打包的其他配置
自动打开浏览器： “dev”: “webpack-dev-server --open”
默认端口host: “dev”: “webpack-dev-server --open --host 127.0.0.1”
默认端口port: “dev”: “webpack-dev-server --open --host 127.0.0.1 --port 8888”
html-webpack-plugin生成预览页面
上面一步通过localhost:8080访问src下的index.html，可以看到页面，但是我们想要的效果是打开
http://localhost:8080/能够直接看到页面
其实我们只要将index.html复制一份，放到根目录下就可以了，8080默认打开index.html
1安装html预处理器，我安装的是3.2.0版本
npm install html-webpack-plugin -D
2.修改webpack.config.js文件配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 创建此插件的实例对象;
const htmlPlugin = new HtmlWebpackPlugin({
template: "./src/index.html", // 指定要用的模板文件
filename: "index.html", //生成的问爱你名称，该文件存在于内存中，在目录中不显示
});
plugins: [htmlPlugin], // plugins数组是webpack打包期间会用到的一些插件列表
webpack中loader加载器的使用
webpack默认只能打包js文件，其他文件打包不了，所以我们要借助loader来帮忙，使用loader加载器进行预编译
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uAcyrix4-1641204223473)(C:\Users\lucas\Desktop\学习\图片\loader.jpg)]
打包处理css文件
1）npm i style-loader css-loader -D
2）配置webpack.config.js
module: {
rules: [{ test: /.css$/, use: ["style-loader", "css-loader"] }],
}
test: 标识匹配的文件类型
use: 可以接收字符串或数组，指定的loader（一个或多个）顺序是固定的，多个loader的调用顺序是从后往前
版本问题容易报错，我使用的版本： “css-loader”: “^4.0.0”, “style-loader”: “^1.2.1”
打包处理less文件
1) npm i less less-loader -D
2) 修改配置，添加处理less文件的loader
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
我用的版本： “less”: “^3.9.0”, “less-loader”: “^4.1.0”
打包处理scss文件
npm i sass-loader node-sass -D
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
我选择的版本"sass-loader": “^7.3.1”, node-sass@4.14.1@node-sass"
打包处理css兼容前缀
因为有些css属性浏览器不兼容，需要加上前缀处理，所以我们统一使用postcss-loader处理
npm i post-loader autoprefixer -D
// 修改配置
const autoprefixer = require("autoprefixer");
plugins: [htmlPlugin, autoprefixer]
{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
版本容易报错，我使用的版本：“postcss-loader”: “^4.0.0”
打包处理图片和字体
npm i url-loader file-loader -D
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: "url-loader?limit=20000",
},
limit用来指定图片大小（单位byte）,小于它，就会被转为base64的图片，加载更快
打包处理js文件中的高级语法
1）安装babel转换器相关的包 npm i babel-loader @babel/core @babel/runtime -D
2）安装babel语法插件相关的包，npm i babel /preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3）项目根目录下创建babel配置文件，并初始化基本配置
module.exports = {
presets: ["@babel/preset-env"],
plugins: [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties",
],
};
4）配置webpack.config.js
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/,
},
webpack与vue
webpack中配置vue组件的加载器
npm i vue-loader vue-template-compiler -D
修改webpack.config.js配置文件
const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins: [htmlPlugin, autoprefixer, new VueLoaderPlugin()]
{
test: /\.vue$/,
use: "vue-loader",
},
在webpack中使用vue
1）创建一个vue文件
2）npm i vue -S
3）引入vue组件，并在index.html中添加#app的标签，让vue渲染在这个标签中（通过render函数，将App这个vue组件渲染到el，及id为app的区域中）
import App from "./components/App.vue";
const vm = new Vue({
el: "#app",
render: (h) => h(App),
});
webpack打包
最简单的配置：package.json文件中配置脚本
“build”:“webpack -p”
webpack打包
最简单的配置：package.json文件中配置脚本
“build”:“webpack -p”
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
