webpack是一个打包工具,可以把多个静态资源文件打包成一个文件。如图所示:
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
npm install -g webpack webpack-cli
查看安装版本
进入webpack目录,执行命令 npm init -y
在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));
代码
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
执行命令: webpack --mode=development #没有警告
打成包后可以看到,生成了dist文件夹
新建一个index.html文件,引入bundle.js文件
直接执行命令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
代码:
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
body{
background-color:red;
}
1.删除dist文件目录
2.在命令行执行:webpack --mode=development
页面访问: