一、项目准备
1、webpack的配置
准备好文件夹并在vscode中打开
终端执行
yarn init -y
yarn add webpack@5.31.2 webpack-cli@4.9.0 -D
根目录下新建src文件夹
---index.js
在package.json下建立命令
"scripts": {
"build": "webpack"
},
最后终端执行 调试效果
yarn build/npm run build
二、项目开始
1、根目录下新建--webpack.config.js并写入
const path=require('path')//引入path路径
module.exports={
mode:'production',//development
entry:'./src/index.js',//入口路径
output:{
path:path.resolve(__dirname,'dist'),//拼接路径
filename:'bundle.js'//出口路径
}
}
2、在根目录下新建public文件夹并写入html
例如:这里用9个li来练习css less js的效果
首先需要在body下写入html代码
<div id="app">
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
</ul>
</div>
在之前建好的js中写入代码
const addFn=(a,b)=>console.log(a+b);
addFn(2,3)
3、终端执行
yarn build
4、查看dist文件夹下bundle.js 出现下面代码表示执行成功
console.log(5);
三、打包html和js
1、终端配置打包插件
yarn add html-webpack-plugin -D
2、在webpack.js中module.export下配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin({
template: './public/index.html'
})]
四、打包css
1、在src下创建css\index.css并写入内容
li {
list-style: none;
}
2、添加jQuery包
yarn add jquery
3、在index.js中引入css文件
import './css/index.css'
import $ from 'jquery'
$(function(){
$('li:odd').css('color','red')
$('li:even').css('color','green')
})
4、因为webpack默认只识别js文件 运行css需要翻译器 这里需要引入加载器
yarn add style-loader css-loader -D
5、在webpack.config下的module.exports下写入
module: {
rules: [{
test: /\.css$/i,
use: ["style-loader", "css-loader"],//从右往左执行
//style-loader将模块导出的内容作为样式并添加到 DOM 中
//css-loader加载 CSS 文件并解析 import 的 CSS 文件,最终返回 CSS 代码
}, ],
},
6、yarn build调试是否报错
五、打包less
1、在src中创建less文件夹和less文件 less\index.less
2、写入内容
html{
body{
background-color: green;
// background: url(../assets/logo_small.png); 之后会用
}
}
3、在index.js中导入less
import './less/index.less'
4、安装加载器
yarn add less less-loader -D
5、在webpack.config下module.export下module下rules加入
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
6、yarn build调试
六、处理图片
1、在src下新建assets文件夹 放入图片
2、less引入图片
html{
body{
background-color: green;
// background: url(../assets/logo_small.png); 之后会用
}
}
3、index.js下引入动图
import imgUrl from './assets/1.gif'
var img=document.createElement('img')
img.src=imgUrl
document.body.append(img)
4、在webpack下 module.exports下module下rules写入
{
test: /\.(png|jpg|jpeg|gif)$/i,
type:'asset'
},
5、yarn build
七、字体图标
1、assets文件夹下放入字体图标文件
2、webpack.config中写入
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
generator: { // 生成文件名字 - 定义规则
filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
}
},
3、index.js中写入
import './assets/fonts/iconfont.css'
var i=document.createElement('i')
i.className='iconfont icon-weixin'
document.body.append(i)
4、yarn build
八、babel
1、下载插件
yarn add babel-loader @babel/core @babel/preset-env -D
2、webpack.config下写入
{
test: /\.m?js$/, //?是0次或1次 这块匹配是 aaa.mjs(未来的es6写法的js) aaaa.js
exclude: /node_modules/, //include 包含 exclude 不包含
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
3、index.js中写入代码
const addFn=(a,b)=>a+b
console.log(addFn);
4、在bundle.js中最后可以看到
此时mode应该是production模式
mode: 'production', //development
九、示例
最后文件夹文件样式如下
代码执行后具体样式如下