一 webpack
1.1 webpack的作用
webpack是一个打包工具,可以把多个静态资源文件打包成一个文件。如图所示:
1.2 版本依赖对照关系
PS E:\vue-project\vue-demo0902\wp-demo> npm -v
6.4.1
PS E:\vue-project\vue-demo0902\wp-demo> node -v
v10.14.2
PS E:\vue-project\vue-demo0902\wp-demo> webpack -v
4.43.0
style-loader与css-loader
二 webpack的打包案例
2.1 安装webpack
npm install -g webpack webpack-cli
查看安装版本
2.2 新建工程初始化
进入webpack目录,执行命令 npm init -y
2.3 在工程中新建src目录
2.4 新建脚本文件
在src目录下新建几个文件:
1.新建common.js文件
exports.info = function (str) {
document.write(str);
}
2.新建utils.js文件
exports.add = function (a, b) {
return a + b;
}
3.新建main.js文件
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));
2.4 在工程目录下新建一个webpack.config.js文件
代码
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
2.5 执行打包
执行命令: webpack --mode=development #没有警告
打成包后可以看到,生成了dist文件夹
2.6 引用
新建一个index.html文件,引入bundle.js文件
2.7 执行观察
三 案例3:打包css文件
3.1 安装style和css加载器
直接执行命令Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css。
直接执行命令:
npm install --save-dev style-loader css-loader
在进行打包时候会报错,需要降低版本安装
安装2.x版本
PS E:\vue-project\vue-demo0902\wp-demo> npm install css-loader@2.0.2 --save-dev
npm WARN style-loader@3.3.1 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN wp-demo@1.0.0 No description
npm WARN wp-demo@1.0.0 No repository field.
+ css-loader@2.0.2
found 0 vulnerabilities
PS E:\vue-project\vue-demo0902\wp-demo> npm install style-loader@0.23.1 --save-dev
npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN wp-demo@1.0.0 No description
npm WARN wp-demo@1.0.0 No repository field.
updated 1 package and audited 30 packages in 6.967s
Hash: 96e299bd847414758aae
Time: 494ms
Built at: 2023-09-10 11:42:17
Asset Size Chunks Chunk Names
bundle.js 24 KiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 178 bytes {main} [built]
[./src/common.js] 68 bytes {main} [built]
[./src/main.js] 158 bytes {main} [built]
[./src/style.css] 1.06 KiB {main} [built]
[./src/utils.js] 61 bytes {main} [built]
+ 3 hidden modules
3.2 修改webpack.config.js
代码:
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
3.3 在src文件夹创建style.css
body{
background-color:red;
}
3.4 在main.js中进行加载
3.5 发布打包
1.删除dist文件目录
2.在命令行执行:webpack --mode=development
页面访问: