1、搭建案例文件结构
2、在工作目录执行npm init -y
进行初始化生成package.json文件
3、执行npm i jquery
,配置main.js文件
如下
// 导入jquery类库
import $ from 'jquery'
$(function () {
// 设置奇数行背景色
$('li:odd').css('backgroundColor', 'pink')
// 设置偶数行背景色
$('li:even').css('backgroundColor', 'skyblue')
})
4、依次执行npm i webpack -D
、npm i webpack-cli -D
、npm i webpack-dev-server -D
、npm i html-webpack-plugin -D
1).修改package.json文件
"scripts": {
"dev": "webpack-dev-server"
}
2).在文件根目录新建一个webpack.config.js
文件
// 导入处理路径的模块
const path = require('path')
// 启用热更新的第二步
const webpack = require('webpack')
// 导入自动生成HTML文件的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 项目入口文件
entry: './src/main.js',
// 配置输出选项
output: {
// 配置输出路径
path: path.resolve(__dirname, 'dist'),
// 配置输出的文件名
filename: 'bundle.js'
},
devServer: {
// 自动打开浏览器
open: true,
// 设置启动时候的运行端口
port: 3000,
// 指定托管的根目录
contentBase: 'src',
// 启用热更新第一步
hot: true
},
// 添加plugins节点配置插件
plugins: [
// 启用热更新的第三步
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
// 模板路径
template: path.join(__dirname, './src/index.html'),
// 自动生成的HTML文件的名称
filename: 'index.html'
})
]
}
5、使用webpack打包css文件
执行npm i style-loader css-loader -D
修改webpack.config.js这个配置文件(注意:use中相关loader模块的调用顺序是从后向前调用的)
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader']}
]
}
6、使用webpack打包less文件
执行npm i less-loader less -D
修改webpack.config.js这个配置文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
7、使用webpack打包sass文件
执行npm i sass-loader node-sass -D
修改webpack.config.js这个配置文件
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
8、验证结果
在src目录下创建三个样式文件index.css、index.less、index.scss
index.css
li {
list-style: none;
}
index.less
ul {
margin: 0;
padding: 0;
}
index.scss
html,
body {
margin: 0;
padding: 0;
li {
font-size: 16px;
line-height: 32px;
}
}
再在main.js这个文件中添加配置
// 使用 import 语法,导入 CSS样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
最后执行npm run dev
,执行成功后会自动打开浏览器界面,如果看到的样式和配置的一致、修改main.js的颜色属性保存后界面可以自动刷新,说明验证成功。
附:启动配置的两种实现方式
方式一:
"scripts": {
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
}
方式二:
devServer: {
// 自动打开浏览器
open: true,
// 设置启动时候的运行端口
port: 3000,
// 指定托管的根目录
contentBase: 'src',
// 启用热更新第一步
hot: true
}
浏览器显示界面