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

一、项目准备

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>