文章目录
1、创建文件夹
使用npm init在项目文件夹中打开终端创建package.json文件,并创建以下文件夹

在common.js和util.js中定义为模块并默认导出
//common.js文件
export default function(){
console.log('common');
}
//util.js文件
export default function(){
console.log('unit');
}
在app.js中引入这两个模块,并调用
//app.js
import common from "./components/common";
import util from "./components/util";
common()
util()
最后在index.html中引入app.js
<script src="./src/app.js"></script>
2、安装webpack
在终端中输入 npm i webpack webpack-cli -D 安装webpack 以及webpack-cli
npm i webpack webpack-cli -D
webpack-cli 则是 webpack 的执行依赖,能够命令式的执行 webpack。

3、配置式使用webpack
在根目录下新增一个webpack.config.js文件

在文件中设置
module.exports = {
entry: './src/app.js', // 需要打包的文件
mode: 'development' // 打包环境
}
使用 npx webpack --config ./webpack.config.js 执行

执行后打开控制台可以看见执行结果

可以在package.json文件中配置脚本,可以快捷执行启动

执行pnpm dev 即可
4、打包结果
会在根目录生成一个dist文件夹,文件里面有一个main.js文件,这里是默认行为,可以指定位置以及打包后的文件名
修改index.js中的引用路径
<script src="./dist/main.js"></script>
5、webpack的配置
5.1基础配置
entry:表示 webpack 的入口,指定打包的文件,可以一个或多个。
output:表示输出文件的路径和文件名。
mode:表示打包环境,可设置 production 或 development 值。
在webpack.config.js中配置 可以自定义文件夹的名字,以及打包后的文件名(修改后不要忘记修改index.js中的引用路径)
const path = require('path')
module.exports = {
entry: './src/app.js', // 需要打包的文件
output:{
path:path.resolve(__dirname,'dist'), //指定打包后在根目录下生成文件夹的名字
filename:'main.js', //打包后的文件名
clean:true //每次打包时清空上一次的文件
},
mode: 'development' // 打包环境
}
5.2Loader
webpack 的 Loader 主要用于对模块的转换,也就是对文件的转化,如将 Less、Sass 处理成 CSS,将图片处理成 data URL 等。
5.2.1处理css文件
在src中创建css文件夹,创建index.css并添加样式,并在app.js中直接引入css文件

//app.js文件
import common from "./components/common";
import util from "./components/util";
import './css/index.css'
common()
util()
此时运行pnpm dev 会报错,因为webpack无法处理css文件,只能处理json或者js文件
需要借助 Loader 或者 Plugins,处理 CSS 需要用到 css-loader 和 style-loader,不管是 Loader 还是Plugins 都是 JS 模块,所以需要安装:
pnpm i css-loader style-loader -D
loader在配置中的格式
//webpack.config.js文件
const path = require('path')
module.exports = {
entry: './src/app.js', // 需要打包的文件
output:{
path:path.resolve(__dirname,'dist'), //指定打包后在根目录下生成文件夹的名字
filename:'main.js', //打包后的文件名
clean:true //每次打包时清空上一次的文件
},
mode: 'development', // 打包环境
module:{
//
rules:[
{
//正则表达式,匹配.css结尾的文件名
test:/\.css$/,
//执行的顺序是从后往前从下往上,先使用css-loader将css转换成js,在使用style-loader应用
use:['style-loader','css-loader']
}
]
}
}
再次启动,发现css的样式成功加载到页面上

5.2.2配置less文件和sass文件
下载less-loader和sass-loader
pnpm i less less-loader sass sass-loader -D
处理webpack配置文件
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
]
}
再次运行发现less文件和sass文件的样式都渲染在页面上了
5.2.3处理图片
在项目中的 src 下新建 images 文件夹,并放入两张图片,在 index.css 中新增 CSS 代码,并在index.html 中新增 div:
index.css新增的内容
.box3{
width: 300px;
height: 300px;
background-image: url(../images/1.jpg);
background-size: cover;
}
.box4{
width: 300px;
height: 300px;
background-image: url(../images/2.jpg);
background-size: cover;
}
在webpack配置文件中添加loader
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
dataUrlCondition: {
//设置图片的最大尺寸,如果超过200k则以图片的方式引入,如果小于200k以base64的形式使用
maxSize: 200 * 1024
}
}
}
运行pnpm dev 发现图片成功渲染在页面上
5.2.4处理css兼容性
通过 loader,可以将一些较新的 CSS 语法能够在低版本浏览器中使用,而这个 loader 就是 postcss
loader,但这个 loader 还依赖 postcss 和 postcss-preset-env,所以需要安装三个模块:
pnpm i postcss-loader postcss postcss-preset-env -D
webpack.config.js文件修改配置
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-preset-env']
}
}
}]
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-preset-env']
}
}
}, 'less-loader'],
},
{
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-preset-env']
}
}
}, 'sass-loader'],
},
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 200 * 1024
}
},
generator: {
filename: 'static/images/[hash][ext][query]'
}
}
]
除了修改以上配置以外,在 package.json 中新增:“browserslist”: [“ie >= 7”]
{
"name": "10.22homework",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "npx webpack --config ./webpack.config.js"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"css-loader": "^7.1.2",
"less": "^4.2.0",
"less-loader": "^12.2.0",
"postcss": "^8.4.47",
"postcss-loader": "^8.1.1",
"postcss-preset-env": "^10.0.7",
"sass": "^1.80.3",
"sass-loader": "^16.0.2",
"style-loader": "^4.0.0",
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4"
},
"browserslist": ["ie >= 7"]
}
在 index.css 中新增 display: flex; 运行实现css自动跨游览器兼容性适配

5.2.5处理js兼容性
通过 loader ,还可以将 JS 语法在较低的浏览器版本中使用,主要就是通过 babel,同样需要安装三个模块,一个 loader,一个核心库,一个预设,分别就是 babel-loader、@babel/core、@babel/presetenv:
npm i babel-loader @babel/core @babel/preset-env -D
安装后,在 webpack.config.js 中新增 loader 配置如下:
{
//匹配所有的js代码
test: /\.js$/,
//排除node_module
exclude: /node_modules/,
use: ['babel-loader']
}
配置后在opp.js中加入es6语法
function count(...arg) {
console.log(arg[0] + arg[1])
}
count(1,2)
这样配置还不行,@babel/preset-env 才是主要转换代码的东西,为了后面方便修改,在项目根目录新
建一个 babel.config.js 配置文件:
module.exports = {
presets: ['@babel/preset-env']
}

es6的语法被自动兼容了
5.3Plugin
此部分内容有:提取 CSS 为单独文件、自动引入 JS 和 CSS、压缩 CSS
webpack 的插件能够增强 webapck 的功能,本身 webpack 只是解析依赖从而打包,loader 使webpack 能够转化文件,而 plugins 则使 webpack 能够拥有压缩,提取等更大强大的功能。
webpack 的插件主要在 plugins 字段上,是个数组,也就是可以使用多个插件,每个插件在使用的时候都必须传入一个 new 实例。
5.3.1通过 MiniCssExtractPlugin 插件可以将 CSS 提取到单独的文件中。
安装插件
npm i mini-css-extract-plugin -D
然后修改 webpack 的配置:


5.3.2通过 HtmlWebpackPlugin 插件生成一个新的html并自动引入相应的资源
安装插件
npm i html-webpack-plugin -D

打包后,可看到在 dist 下有一个 index.html
同时帮你自动引入了相关的资源,这时就可以访问这个新的 index.html 来查看效果了。
5.3.3压缩css
使用 CssMinimizerWebpackPlugin 这个插件能够将 CSS 压缩为一行,减少文件体积。
安装插件
npm i css-minimizer-webpack-plugin -D
修改webpack配置

打包效果如下

5.3.4自动清空打包目录
安装插件
npm i clean-webpack-plugin -D
配置

5.4DevServer
devserver 可以在本地启动一个服务,使我们可以使用 http 协议去访问 index.html ,并且当修改代码
时,能够监听当前项目的文件变动从而实现自动打包,而不用每次修改后都要手动打包:
安装要安装 webpack-devserver 模块
npm i webpack-dev-server -D
在 webpack 配置中添加 devServe 字段,里边配置 host、port等。

同时,webpack 打包命令也需要添加一个 serve 参数才能调用 webpack-dev-server:

5.5小结
上面通过处理各种资源来介绍 webpack 的配置使用,但只介绍了其中一部分,更多的 loader,plugins
等使用方法还是得到官方文档查询。
只要理解 webpack 的 entry、output、loader、plugins、mode 就非常简单,其余的查询官方文档即可。

被折叠的 条评论
为什么被折叠?



