目录
打包的时候 处理css中使用的图片问题（css中引入的背景图、图标字体等）
简介
-
Webpack的工作原理？
Webpack是前端打包工具，它根据webpack的配置文件(webpack.config.js)来遍历（循环）我们要打包的项目文件，然后将遍历的项目文件根据webpack的配置规则进行打包转换成前端客户端(比如：浏览器)能够识别的资源。
-
webpack简介
-
Webpack是一个前端自动化打包工具，根据它的名字也很好理解，web-pack顾名思义就是前端打包工具，它是基于Node和NPM的，所以在安装使用webpack之前，需要安装nodejs，nodejs的版本过低也不行，所以推荐安装nodejs版本为v8.11.2以上，npm版本为v5.6.0以上。
-
-
webpack是一个第三方模块包 我们需要先安装模块包之后 才能使用webpack 进行打包
-
我们要使用webpack打包文件 需要安装两个第三方模块——webpack@4 和 webpack-cli@3
-
一般我们建议进行全局安装：npm i webpack@4 webpack-cli@3 -g
-
webpack打包项目文件
1.创建项目文件
-
创建文件夹
-
npm init
2.webpack打包
-
理论上 webpack 只能打包js文件 一般我们把自己开发的文件 放在项目的src文件夹中 而将打包好的文件 放在dist文件夹中
-
我们使用webpack打包的第一件事情 就是在项目文件夹中 添加webpack的配置js文件——webpack.config.js
-
webpack.config.js的内容如下
-
module.exports = { entry:"入口文件路径"， output:"出口文件路径"， mode:"打包模式 production/development"， //默认为产品模式 module：{}，//用来配置辅助打包的加载器 plugins：{} //用来配置辅助打包的插件 }
-
webpack打包js文件
1.单入单出
-
//简易使用绝对路径 module.exports = { entry:"入口文件路径"， output:{ path:"出口文件存储路径", filename:"出口文件的文件名" }， } -
编写好配置文件之后 在命令行工具中 运行 webpack命令即可
2.多入单出
-
module.exports = { entry:["入口文件路径","入口文件2路径",....]， output:{ path:"出口文件存储路径", filename:"出口文件的文件名" }， }
3.多入多出
-
module.exports = { entry:{ 属性名："入口文件1路径", 属性名："入口文件2路径", 属性名："入口文件3路径", ... }， output:{ path:"出口文件存储路径", filename:"[name].js"//这里[name]表示获取上述入口文件的属性名 }， }
webpack打包css文件
-
webpack打包除了js之外的任何文件 都需要 使用加载器 或 插件
-
我们打包css文件的时候 就需要用到一个加载器 我们可以到webpack官网的文档上 进行查询
-
先将css文件引入到 js文件中 通过打包js文件 将css文件一并打包
-
es6中给我们提供了一种在js中 引入其他资源文件的方式——import 文件名 from "要引入的资源文件路径"
-
webpack.config.js的写法
-
module.exports = { entry:"入口文件路径"， output:{ path:"出口文件存储路径", filename:"出口文件的文件名" }， module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, ], }, } -
注意：在编写webpack.config.js之前 需要先 安装两个加载器 style-loader 和 css-loader 并引入 才能使用
-
注意：由于我们使用的是webpack4版本 因此要使用对应版本的加载器 style-loader是2版本 css-loader是2版本
-
webpack自动生成引入打包js文件的html
-
webpack打包html文件 需要使用一个插件——html-webpack-plugin
-
安装插件——由于我们使用的是webpack4 因此要安装html-webpack-plugin4版本
-
安装命令：npm i html-webpack-plugin@4
-
使用插件打包生成html文件
-
//webpack.config.js //1.引入插件 let HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require('path'); //2.暴露模块 module.exports = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js', }, plugins: [new HtmlWebpackPlugin({ title: "webpack 的使用",//打包完成之后的html文件的标题 filename: "index.html", // 打包产出文件名(在dist目录查 看) template: path.join(__dirname,"index.html" ), // 以 此文件来作为基准(注意绝对路径, 因为此文件不在src下) favicon: "./src/assets/favicon.ico", // 插入打包后的 favicon图标 minify:{ collapseBooleanAttributes: true, //是否简写 boolean格式的属性如：disabled="disabled"简写为disabled minifyCSS: true, //是否压缩 html里的css（使用clean-css进行的压缩） 默认值false minifyJS: true, //是否压缩 html里的js（使用uglify-js进行的压缩） removeAttributeQuotes: true, //是否移除 属性的引号 默认false removeComments: true, //是否移除 注释 默认false removeCommentsFromCDATA: true, //从脚本和 样式删除的注释, 默认false } })], }; -
注意：打包自动生成html文件的时候 有可能报错 如果报错 可以在本地重新安装一遍webpack 和 webpack-cli 来解决这个问题
-
在打包过程中 单独分离出css文件
-
我们需要使用一个插件——extract-text-webpack-plugin
-
下载插件：npm i extract-text-webpack-plugin@next
-
//1.引入插件 const ExtractTextPlugin = require("extract-text-webpackplugin"); const path = require('path'); //2.暴露模块 module.exports = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js', }, module: { rules: [ { test: /\.css$/i, //在加载器部分使用插件 use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。 注意：我们也需要下载style-loader 和 css-loader两个加载器 fallback: "style-loader", use: "css-loader" }) }, ], }, //在插件部分也要进行单独使用 plugins: [new HtmlWebpackPlugin({ title: "webpack 的使用",//打包完成之后的html文件的标题 filename: "index.html", // 打包产出文件名(在dist目录查 看) template: path.join(__dirname,"index.html" ), // 以 此文件来作为基准(注意绝对路径, 因为此文件不在src下) favicon: "./src/assets/favicon.ico", // 插入打包后的 favicon图标 minify:{ collapseBooleanAttributes: true, //是否简写 boolean格式的属性如：disabled="disabled"简写为disabled minifyCSS: true, //是否压缩 html里的css（使用clean-css进行的压缩） 默认值false minifyJS: true, //是否压缩 html里的js（使用uglify-js进行的压缩） removeAttributeQuotes: true, //是否移除 属性的引号 默认false removeComments: true, //是否移除 注释 默认false removeCommentsFromCDATA: true, //从脚本和 样式删除的注释, 默认false } }),new ExtractTextPlugin("在打包出口文件夹中 存放分离出来的css文件的路径")], };
webpack打包less
-
下载安装打包加载器：npm i less@3 less-loader@7 -D
-
同时还需要下载安装style-loader 和 css-loader
-
使用加载器进行less文件的打包
-
module.exports = { entry:"入口文件路径"， output:{ path:"出口文件存储路径", filename:"出口文件的文件名" }， module: { rules: [ { test: /\.less$/i, use: ["style-loader", "css-loader","less-loader"], }, ], }, } -
注意：加载器的使用顺序 是固定的
-
webpack打包分离的css文件 添加私有前缀
-
下载安装加载器：npm i postcss-loader@4 postcss@8 autoprefixer@10 -D
-
1.替换css加载器
-
{ test: /\.css$/, // 以.css结尾的文件类型 use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, "postcss-loader"] }) },
-
-
2.编写一个postcss.config.js 配置文件 放在项目根目录下 内容如下
-
module.exports = { plugins: { // postcss在翻译css代码的时候, 需要使用哪些插件功能 // 1. 写使用插件模块的名字, postcss会自己去require引入 'autoprefixer': { // 浏览器支持列表放到了package.json中browserslist中进行编写 } } }
-
-
3.package.json中添加如下内容
-
"browserslist": [ "defaults", "not ie < 11", "last 2 versions", "iOS 7", "last 3 iOS versions" ] //注释不要粘贴到package.json中 // defaults相当于 "> 5%", 国内浏览器使用率大于5%的 // not ie < 11 不兼容IE11以下的浏览器 (支持ie11) // 支持最后2个版本 // iOS苹果手机操作系统, 支持ios7 // 支持最后3个IOS的版本 ios13, 12, 11
-
打包的时候处理html文件中 使用的图片
-
1.下载一个插件：npm i copy-webpack-plugin@5 -D
-
2.配置文件中引入： const CopyWebpackPlugin = require('copy-webpack-plugin')
-
3.使用插件
-
new CopyWebpackPlugin([{ from : path.join( __dirname,'src','img' ),//从哪个文件夹开始复制 to : path.join( __dirname,'dist','img' )//复制到那个文件夹 }])
-
打包的时候 处理css中使用的图片问题（css中引入的背景图、图标字体等）
-
1.下载加载器：npm i url-loader file-loader -D
-
2.配置加载器
-
{ test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件 use: 'url-loader' } // 如果处理字体图标需要引入这个 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader' }
-
-
注意：默认打包规则为 es6提供的 base64格式的打包规则 得到的结果是[object module] 因此我们应该对加载器 进行配置
-
//解决上述问题 需要将 加载器 设置为如下格式 { test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件 loader: 'url-loader',//规定加载器为 url-loader options:{ limit:8*1024*1024,//数字 表示可以接受的打包图片的大小（数据量的大小） esModule:false;//默认值为true 表示使用es6的打包格式来打包 为了解决问题 我们需要将其设置为 false name:"../img/[name].[ext]"//背景图的相对路径 //说明：[name]表示打包的原文件名 [ext]表示打包的原文件后缀 } }
-
在运行webpack命令的时候 也可以进行产品模式和开发模式的配置
webpack --production 按照产品模式进行打包 webpack --development 按照开发模式进行打包
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
