1.初始化package.json 安装webpack
npm init -y
npm i webpack webpack-cli -D
2.新建webpack.config.js
3.安装html依赖
npm i html-webpack-plugin -D
配置webpack.config.js
1.定义入口entry
- 字符串类型
entry: './src/index.js'
// 以src/index.js为入口打包
- 数组类型
entry: ['./src/index.js', './src/a.js']
// 以src/index.js,src/a.js为入口打包
- 对象类型
entry: {
main: ['./src/index.js', '/src/a.js'],
util: ['./src/util.js']
}
// 以index.js、a.js为入口打包main.js
// 以util.js为入口打包util.js
2.定义出口
output: {
// 输入文件名称
filname: 'bundle.js',
// 对象入口定义出口时需写成
filename: '[name].js',
// 定义输出路径
// (需引入模块path) path=require('path')
path: path.resolve(__dirname, 'build'),
// 每次打包清除之前打包的目录内容
clean: true,
}
3.处理html文件
plugins: [
// 定义多个实例时必须指定filename
new HtmlWebpackPlugin({
// 定义输出的html的title
// (使用title选项并指定template时需要修改模板title标签)
// <%= htmlWebpackPlugin.options.title%>
title: 'webpack-start',
// 定义使用的html模板
template: path.resolve(__dirname, './src/index.html')，
// 打包的html名称 默认为index.html
// filename: 'start.html'
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
},
// 定义引入哪个打包后的js
chunks: ['main']
}),
]
4.处理css资源
module: {
rules: [
//wanner 写css部分注释
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}，
// 配置less(安装less、less-loader)
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 配置sass(安装node-sass、sass-loader)
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
将css打包成独立的文件(此时的css资源还是混入在js中被require的方式引入，被css-loader解析，然后由style-loader解析成style标签插入到了head中,可以安装mini-css-extract,打包成单独的css文件)
plugins: [
new MiniCssExtractPlugin()
]
替换loader
image.png
显示结果
image.png
此时的完整配置
image.png
(到此时已经简单处理js、html、css)
-
处理css浏览器兼容性(postcss-loader, postcss-preset-env, 创建postcss.config.js)
步骤一
步骤二
步骤三