【Webpack】构建Webpack程序

1.构建项目目录安装webpack包

mkdir webpack_project
cd webpack_project
npm init -y
npm i webpack webpack-cli -D

2.创建src文件夹作为源码目录

创建index.html,index.js
小插曲:做一个颜色渐变的10个li标签
npm i jquery -S
核心js代码

import $ from 'jquery';

$(function(){
	$("li:odd").css('background-color','red');
	$('li:even').css('background-color','yellow');
});

核心html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack Project</title>
</head>
<body>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <script src="../dist/bundle.js"></script>
</body>
</html>

3.创建webpack.config.js配置文件

const path = require('path');

module.exports = {
    mode:"development",
    entry:"./src/index.js",
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}

4.修改package.json的脚本

  "scripts": {
    "dev": "webpack"
  }

5. 执行脚本

npm run dev

image

6.打开index.html

image

posted @ 2021-09-25 15:33  鸿运小猫  阅读(41)  评论(0)    收藏  举报