使用yarn进行webpack配置及简单使用

本文介绍了使用yarn和webpack进行前端项目配置的详细步骤,包括webpack的初始化、项目结构设置、打包HTML和JS、CSS与LESS的处理、图片资源处理、字体图标集成以及Babel的使用。通过实例展示了如何配置webpack.config.js,以及在项目中引入和处理各种资源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、项目准备

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

九、示例

最后文件夹文件样式如下

 代码执行后具体样式如下

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值