#虽然作为一个前端已经耕耘此行业有三五个年头,但都是在业务中未曾精进,怀着初心,重识Webpack,砥砺前行💪#
part 1 运行指令
开发环境: webpack (入口文件地址) -o (出口文件地址) --mode=development
生产环境: webpack (入口文件地址) -o (出口文件地址) --mode=production
例如: webpack ./src/index.js -o ./build/build.js --mode=development
part2 指令区别
-
Webpack 能默认处理js/json资源,不能处理css/img等其它资源
-
生产环境和开发环境将ES6模块化编译成浏览器能识别的模块
-
生产环境比开发环境多了一个js代码的压缩(开发环境不会进行压缩
part3 安装webpack环境
设置新镜像 npm config set registry https://registry.npmmirror.com
全局安装 webpack npm i webpack webpack-cli -g
part4 webapck.config.js配置文件
/*
webpack.config.json webpack的配置文件
作用: 指示webpack具体要做什么操作
tips: 所有的操作都是基于nodejs平台运行,模块化默认采用commonjs
*/
const {resolve} = require('path');
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs变量 代表当前文件的目录的绝对路径
path: resolve(__dirname, 'build'),
},
// loader配置
module: {
rules: [
// 详细的loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
/* use数组中的loader执行顺序: 从右到左,从下到上,依次执行 */
// 创建style标签 将js中的的样式资源进行插入,添加到header中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面的内容是样式字符串
'css-loader'
]
},
{
// 匹配.less文件
test: /\.less$/,
// 使用哪些loader进行处理
use: [
/* use数组中的loader执行顺序: 从右到左,从下到上,依次执行 */
// 创建style标签 将js中的的样式资源进行插入,添加到header中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面的内容是样式字符串
'css-loader',
// 将less文件变成css文件
'less-loader'
]
}
]
},
// plugins的配置
plugins:[
// 详细的plugins的配置
],
// 模式
mode: 'development'
}
pakage.json
{
"name": "bundle-css",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//运行打包
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.10.0",
"less": "^4.2.0",
"less-loader": "^12.2.0",
"style-loader": "^3.3.4",
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4"
}
}