2022/8/22 webpack兼容插件安装以及案例思路 server

最新推荐文章于 2024-07-14 15:41:52 发布

夕阳下的春日部男孩

最新推荐文章于 2024-07-14 15:41:52 发布

阅读量179

点赞数

文章标签： javascript 前端 json 学习

本文链接：https://blog.csdn.net/weixin_54534229/article/details/126462932

版权

捋清一个思路(webpack)

首先创建一个全英文的文件夹，在文件夹内初始化 npm init -y 出现package.json文件，其中scripts内填写如图.serve为后期安装插件才加入

{
  "name": "change-rows",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.2"
  }
}

在文件夹内创建一个src根目录内分别有：index.html / index.js / webpack.config.js 。

webpack.config.js，mode在开发过程一定用development,准备上线 production

主要就是一个暴露的组件

const path = require('path')
module.exports = {
    mode : 'development',
    //entry 指定处理哪个文件
    entry : path.join(__dirname,'./index.js'),
    //指定生成文件放在哪里
    output :{
       //存放目录
       path :path.join(__dirname,'dist')   ,
       //生成文件名
       filename : 'bulide.js'
    }
}

index.js 例子

//es6导入语法
import $ from 'jquery'

$(function(){
    //实现基础行奇偶行
    $('li:odd').css('background','red')
    $('li:even').css('background','pink')
})

在目录内打开cmd填入

npm run dev出现dist文件夹=>main.js(为jqurey和JS的结合压缩代码)

Html的界面如下

src的引入为 main.js(index.js和json内上线需要插件的结合)

<!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>Document</title>
    <script src="../dist/main.js"></script>
    
    
</head>
<body>
    <ul>
        <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>
    </ul>
  
</body>
</html>