什么是webpack
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。
在webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
Webpack基本概念
入口(Entry):指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。
输出(Output):指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。
Loader:让 webpack 能够去处理那些非 JS 的文件,比如样式文件、图片文件(webpack 自身只理解 JS)
插件(Plugins):可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。
模式(Mode):指示 webpack 使用相应模式的配置。
安装步骤
1.创建项目
创建一个新的文件夹
双击打开,在此位置输入cmd,并按enter键,打开dos窗口
在窗口输入
npm init –y
在webpack3文件夹下生成 package.json 文件
安装webpack
在dos窗口输入
npm install webpack webpack-cli --save-dev
安装完毕,webpack3文件夹下一共三个文件夹
在webpack3文件夹下面创建一个名为src和dist(打包成功后的文件都在里面,可以随时删除,成功后会自己生成)的文件夹
打包js文件
在src文件夹里面新建一个js文件夹,在里面建立入口js文件index.js和我们想要打包的js文件mathUtils.js
mathUtils.js
index.js
使用webpack命令打包js文件
在dos窗口输入
webpack ./scr/index.js -o ./dist
会有一个警告,原因使用webpack没有指定mode为 development(开发模式)或者为production(生产模式)
在dos窗口输入命令:
webpack ./src/index.js -o ./dist --mode=development
显示打包成功
虽然输入webpack命令很方便,但是不符合我们的使用习惯,一般来说我们使用的是
所以,在package.json中的scripts中加上:"build": "webpack"即可
在dos命令输入npm run build,打包成功
测试
在src目录下新建一个index.html文件,导入main.js
运行到浏览器(如图测试,打印成功)
使用loader打包
loader是webpack中一个非常核心的概念。
lodaer可以将js、图片、css处理打包,但是对于webpack本身是不能处理css、图片、ES6转ES5等。
此时就需要webpack的扩展,使用对应的loader就可以。
Css文件的打包
.将除了入口文件(index.js)所有js文件放在js文件夹,新建一个css文件夹,新建一个normal.css文件
记得在webpack.config.js中修改路径
在normal.css中输入
index.js导入normal.css文件
安装css-loader和style-loader
npm install --save-dev css-loader style-loader
css-loader只负责加载css文件,不负责解析,如果要将样式解析到dom元素中需要使用style-loader。
配置webpack.config.js
module: {
// 配置style,css
rules: [{
test: /\.css$/, //正则表达式匹配css文件
//css-loader只负责css文件加载,不负责解析,要解析需要使用style-loader
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}] //使用loader
}]
}
webpack使用多个loader是从右往左解析的,所以需要将css-loader放在style-loader右边,先加载后解析
打包成功 npm run build
运行index.html
Less文件处理
在css文件夹中新增一个special.less文件
@fontSize:50px;//定义变量字体大小
@fontColor:orange;//定义变量字体颜色
body{
font-size: @fontSize;
color: @fontColor;
}
导入css文件
安装less-lodaer
npm install --save-dev less-loader less
在webpack.config.js 中配置less-loader
{
test: /\.less$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
打包npm run build
打包成功
字体是orange,大小为50px。
图片文件的处理
这里可以不用下载loader
直接配置webpack.config.js
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'images/[hash][ext][query]'
} //把打包的图片放到images文件夹
},
在src中创建img文件夹,放入一张图片,在normal.css中,使用这张图片
Dist文件夹,生成inages文件夹,里面有一张图片
打包 npm run build(如图所示,打包成功)
打包html资源
安装loader和html-webpack-plugin
npm install --save-dev html-webpack-plugin html-loader
配置webpack.config.js
// 配置html-loader,打包可以加载出图片
{
test: /\.html$/i,
loader: "html-loader",
},
打包其他资源
配置
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[hash][ext][query]'
} //把打包的字体图标放到fonts文件夹
},
配置devServe
/ 开发服务器 devServer:用来自动化,不用每次修改后都重新输入webpack打包一遍(自动编译,自动打开浏览器,自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出(不会像之前那样在外面看到打包输出的build包,而是在内存中,关闭后会自动删除)
// 启动devServer指令为:npx webpack-dev-server
//不会生成dist文件
// 页面要手动刷新
devServer:{
/* contentBase: resolve(__dirname, 'dist'), */
compress: true,
// 端口号随意配置
port: 3000,
hot:true,
open: true,
},