最终完整的代码见 https://github.com/yk2012/webpack_demo
1. 创建配置文件
npm init
npm i webpack webpack-cli -D
创建webpack配置文件webpack.config.js
作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)
所有构建工具都是基于node.js平台运行的,模块化默认采用commonjs
const {
resolve } = require('path'); // node 内置核心模块,用来处理路径问题
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: './built.js',
// 输出路径
// __dirname nodjs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'bulid')
},
// loader 的配置
module: {
rules: [
// 详细loader配置
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
],
// 模式
mode: 'development',
// mode: 'production'
}
2. 打包样式资源
2.1 css-loader
2.1.1 loader配置
编辑webpack.config.js中的module模块 详细loader配置
module: {
rules: [
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上 以此执行
// 创建style标签,将js中的样式资源插入进去,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
}
]
},
2.1.2 下包 style-loader
npm i css-loader style-loader -D