webpack，plugin，loader，Source Map的基本使用（笔记本）

爱打代码的小伦

已于 2023-06-10 16:31:30 修改

阅读量134

点赞数

文章标签： webpack 前端 javascript html5 jquery

于 2023-06-08 19:01:17 首次发布

本文链接：https://blog.csdn.net/m0_59285890/article/details/131092379

版权

<!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="index.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>

//1.使用ES6模块化语法导入jquery
import $ from 'jquery'
// 实现隔行变色
$(function () {
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', 'pink')
})

发现使用不了（所以webpack的作用就是解决兼容性的问题）

const path = require('path')
module.exports = {
    mode: 'development',
    // 下面用的就是要上线啦我们就用这个打包方式
    // mode: 'production'

    // 指定打包的入口
    entry: path.join(__dirname, './src/index.js'),
    output: {
        // 指定输出文件的存放路经
        path: path.join(__dirname, './dist'),
        // 指定输出文件的名称
        filename: 'bundle.js'
    }
}

因为运行的时候报错了所以更新一下

webpack.config.js

const path = require('path')
// 1.导入插件，得到构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2.创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})
module.exports = {
    mode: 'development',
    // 下面用的就是要上线啦我们就用这个打包方式
    // mode: 'production'

    devServer: {
        static: "./"
    },


    // 指定打包的入口
    entry: path.join(__dirname, './src/index.js'),
    output: {
        // 指定输出文件的存放路经
        path: path.join(__dirname, './dist'),
        // 指定输出文件的名称
        filename: 'bundle.js'
    },
    plugins: [htmlPlugin]//挂载插件的实例对象
}