2)webpack
1.什么是webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。
当 webpack 处理应用程序时，它为根据入口js文件在内部构建一个 依赖图(dependency graph)，
此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle(打包机)。
2.核心概念
1) entry 入口
以某个文件为入口开始打包
2) output 输出
打包后资源输出到哪里去
3) loader 加载器
webpack 本身只能识别 json、js 模块，其他模块(less)一旦加载就会报错
需要借助 loader 帮助 webpack 识别它识别不了的模块
4) plugins 插件
loader 功能有限，要想做功能更加强大的工作交给插件
5) mode
打包模式：开发环境（development）和生产环境（production）
3.下载安装
npm i webpack webpack-cli -g
npm init -y
npm i webpack webpack-cli -D
4.用法
1)直接使用
1.运行 webpack 指令：`webpack ./src/js/index.js -o ./dist/js/index.js --mode=development`
以 webpack 的开发环境运行，处理 ./src/js/index.js 文件(index.js所依赖的模块也会自动被处理)，输出到 ./dist/js/index.js
功能
能将 ES6 模块化编译成浏览器识别的语法,打包后可直接在浏览器运行
运行 webpack 指令：`webpack ./src/js/index.js -o ./dist/js/index.js --mode=production`
以 webpack 的生产环境运行，处理 ./src/js/index.js 文件(index.js所依赖的模块也会自动被处理)，输出到 ./dist/js/index.js
功能
能将 ES6 模块化编译成浏览器识别的语法
压缩 js 代码
打包后可直接在浏览器运行
2.问题：
不能识别其他模块（less\css\html\jpg...
2)通过配置config文件夹使用
webpack.dev.js:配置开发环境,运行指令npm start
webpack.prod.js：配置生产环境,运行指令serve build
1.下载安装
npm i less less-loader style-loader css-loader -D 打包less
npm install --save-dev html-webpack-plugin 打包html(注意插件需要引入使用)
npm i url-loader file-loader -D 打包less图片,file-loader还可解决其它文件问题，如iconfont
npm i html-loader -D 解决 html 中 img src 为 解析前路径的问题，找不到资源
npm i webpack-dev-server -D 用来配置自动化，如自动打开浏览器等
配置生产环境额外下载的包:
npm i mini-css-extract-plugin -D 从js文件中找到css字符串，提取css成单独css文件,支持按需加载
npm i optimize-css-assets-webpack-plugin -D 压缩css的插件
npm i clean-webpack-plugin -D 自动删除由于重命名在打包的重复文件
!!!! npm i serve -g 解决生产环境css和html图片路径问题，需要下载一个全局服务器
2.配件package.json
// 启动项目的指令
"scripts": {
// npm start
// 本地下载的有些包会将运行的脚本添加到 node_modules/.bin 目录中
// 在start指令运行时，会将node_modules/.bin临时添加为环境变量
"start": "webpack-dev-server --config ./config/webpack.dev.js",
// 除了start，其余指令都得加 run
// run的作用就是将node_modules/.bin临时添加为环境变量
// npm run build
"build": "webpack --config ./config/webpack.prod.js"
},
3.webpack.dev.js配置文件内容：
const { resolve } = require("path");
// 配置html插件需要引入使用，而loader不需要引入
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// entry，指定入口文件
entry: "./src/js/index.js",
// output，指定js输出文件
output: {
path: resolve(__dirname, "../build"), // 输出目录
filename: "build.js" // 输出文件名
},
// loader
module: {
rules: [
// 所有loader的配置
{
// less配置
// 检查是否是less文件
test: /\.less$/,
// 如果满足test要求，文件就会通过use来处理
use: [
// use数组执行顺序：从下到上，从右到左
{
loader: "style-loader" // 从js文件中找到css字符串，并创建style标签插入页面中
},
{
loader: "css-loader" // 将 CSS 转化成 字符串，会以 CommonJS 模块化整合js文件中
},
{
loader: "less-loader" // 将 Less 编译成 CSS
}
]
},
{
// 图片loader配置(默认是不能处理html的图片，让html加载图片)
test: /\.(png|jpg|gif)$/,
loader: "url-loader",
options: {
/*
11kb以下的图片会被base64(图片转成字符串格式)处理
优点：图片不会发送额外的请求，随着html文件一起被请求下来（减少服务器压力）
缺点：体积会变的更大
所以一般针对小图片来做
*/
limit: 11000,
// 打包后的图片名处理
// 图片名是一串很长的hash值,[hash:10] hash值取10位
// [ext] 原来文件扩展名是啥就是啥
name: "[hash:10].[ext]",
// 关闭ES6模块化，使用Commonjs模块化
// 解决 html 中 img src 为 [object Module]
esModule: false,
}
},
{// 解决 html 中 img src 为 解析前路径的问题，找不到资源
test: /\.(html)$/,
loader: "html-loader"
},
{
// 排除文件
// 解决其它资源，如iconfont
exclude: /\.(less|jpg|png|gif|js|html)$/,
loader: 'file-loader',
options: {
// 打包后的图片名处理
// 图片名是一串很长的hash值,[hash:10] hash值取10位
// [ext] 原来文件扩展名是啥就是啥
name: "[hash:10].[ext]",
}
}
]
},
// plugins
plugins: [
// html文件配置
new HtmlWebpackPlugin({
// 以 './src/index.html' 为模板创建新的html文件
// 新html文件结构和原来一样 并且 会自动引入webpack打包生成的js/css资源
template: "./src/index.html"
})
],
// mode
mode: "development", // 开发环境
// 用来配置自动化，如自动打开浏览器等
devServer: {
contentBase: resolve(__dirname, '../build'), // 运行（构建后）代码的根目录
compress: true, // 启动gzip压缩
port: 3000, // 端口号
host: 'localhost', // 主机名
open: true, // 自动打开浏览器
overlay: false, // 不要webpack错误在浏览器全屏提示
quiet: true, // 让打包打印信息简短一些
}
};
4.webpack.prod.js配置文件内容：
//引入1模块
const { resolve } = require("path");
// 插件需要引入使用，而loader不需要引入
// 打包html文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 将css文件从js文件中分离插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 将css文件压缩插件
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// 删除重名后打包的多余文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// entry
entry: "./src/js/index.js",
// output
output: {
path: resolve(__dirname, "../build"), // 输出目录
filename: "static/js/build.js", // 输出文件名,如果是[name].js.那么默认输出文件名为main.js
publicPath: '/', // 公共引入资源路径
},
// loader
module: {
rules: [
// 所有loader的配置
{
// 检查是否是less文件
test: /\.less$/,
// 如果满足test要求，文件就会通过use来处理
use: [
// use数组执行顺序：从下到上
{
loader: MiniCssExtractPlugin.loader // 从js文件中找到css字符串，提取css成单独css文件
},
{
loader: "css-loader" // 将 CSS 转化成 字符串，会以 CommonJS 模块化整合js文件中
},
{
loader: "less-loader" // 将 Less 编译成 CSS
}
]
},
{
// 处理图片文件(默认是不能处理html的图片，让html加载图片)
test: /\.(png|jpg|gif)$/,
loader: "url-loader",
options: {
/*
11kb以下的图片会被base64处理
优点：图片不会发送额外的请求，随着html文件一起被请求下来（减少服务器压力）
缺点：体积会变的更大
所以一般针对小图片来做
*/
limit: 11000,
// [hash:10] hash值取10位
// [ext] 原来文件扩展名是啥就是啥
name: "static/media/[hash:10].[ext]",
// 关闭ES6模块化，使用Commonjs模块化
// 解决 html 中 img src 为 [object Module]
esModule: false
}
},
{// 解决 html 中 img src 为 解析前路径的问题，找不到资源
test: /\.(html)$/,
loader: "html-loader"
},
{
// 排除文件
// 解决其它资源，如iconfont
exclude: /\.(less|jpg|png|gif|js|html)$/,
loader: "file-loader",
options: {
name: "static/media/[hash:10].[ext]"
}
}
]
},
// plugins
plugins: [
new HtmlWebpackPlugin({
// 以 './src/index.html' 为模板创建新的html文件
// 新html文件结构和原来一样 并且 会自动引入webpack打包生成的js/css资源
template: "./src/index.html",
// 压缩html文件选项
minify: {
collapseWhitespace: true, // 去除换行符/空格
removeComments: true, // 去除注释
removeRedundantAttributes: true, // 去除默认值标签属性
removeScriptTypeAttributes: true, // 删除script type
removeStyleLinkTypeAttributes: true, // 删除link type
useShortDoctype: true // 使用短的doctype（html5）
}
}),
//将css文件从js里面分离出来[name].css代码分离出来的名字为main.js
new MiniCssExtractPlugin({
filename: "static/css/build.css"
}),
// 压缩css的插件
new OptimizeCssAssetsPlugin({
cssProcessorPluginOptions: {
preset: ["default", { discardComments: { removeAll: true } }]
}
}),
// 自动删除由于重命名在打包的重复文件
new CleanWebpackPlugin()
],
// mode
mode: "production" // 生产环境，会自动压缩js,而html和css需要配置才能压缩
};
5.运行指令
webpack.dev.js:配置开发环境,运行指令npm start(会在内存中生成输出目录build,不会再本地生成输出目录build)
webpack.prod.js：配置生产环境,运行指令npm run build，在运行指令serve build(会再本地生成输出目录build)
注意：除了start，其余指令都得加 run，本地下载的有些包会将运行的脚本添加到 node_modules/.bin 目录中
在start指令运行时，会将node_modules/.bin临时添加为环境变量
run的作用就是将node_modules/.bin临时添加为环境变量
6.常见错误(错误一般只分析前面几行)
1)`Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\XiongJian\Desktop\class191108\05.项目构建\02.webpack'`
style-loader 模块没有找到
下载安装：npm i style-loader -D
2)`Error: Cannot find module 'less'`
less 模块没有找到
下载安装：npm i less -D
3)`xxx is not define`
说明 xxx 没有定义
定义或者引入
4)生产环境路径配置
- 问题：
- css 文件和 html 文件不在同一个目录
- css 文件和 html 文件中的图片都是被 url-loader 处理
- 所以两个文件的图片路径必须是一样的
- 所以导致至少有一个文件图片路径出现问题
- npm i serve -g
- 解决
- 用 / 路径 替换 ./ 相对路径
- / 路径是以根目录出发，不管你在哪个文件夹，都以根目录为起点就不会有问题
- 不能本地运行，需要开启服务器去服务
- serve build 以build为根目录启动一个服务器
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
