webpack.config.js webpack的配置文件
// 作用:指示webpack 干那些活(当运行 webpack 指令时,会加载里面的配置)
// 所有构建工具都是基于node.js平台运行的模块化默认采用commomjs
const {resolve} = require(‘path’);
module.exports={
// webpack配置
// 入口起点
entry:’./src/index.js’,
// 输出
output:{
// 输出文件名
filename:‘built.js’,
// 输出路径
// __dirname node.js的变量,代表当前文件的目录绝对路径
path:resolve(__dirname,‘build’)
},
// loader的配置
module:{
rules:[
// 详细的loader的配置
// 不同的文件必须配置不同的loader处理
{
// 匹配那些文件
test:/.css$/,
// 使用那些loader进行处理
use:[
// use数组中的loader执行顺序:从右到左,从上倒下,依次进行
// 创建style标签,将js中的样式资源插入进行,添加到Head中生效
‘style-loader’,
//将css文件变成commonjs模块加载js中,里面内容样式字符串
‘css-loader’,
]
},
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
}
]
},
// plugins的配置
plugins:[
// 详细plugins的配置
],
// 模式
mode:'development'//开发模式
// mode:'production'//生茶模式
}
以loader的打包的步骤和命令
//初始化package.json
1.npm init
2.Webpack_code
//下载并安装webpack
3.npm i webpack webpack-cli -D
只需要不同文件必须配置不同loader处理,使用前要记得安装,
4.npm install --save-dev html-webpack-plugin
最后运行 webpack或者npm run build
5.webpack