Initial commit

6bd72d20 · Kwan的解忧杂货铺@新空间代码工作室 · 6bd72d20 · 6bd72d20 · 6bd72d20 · 6bd72d20
13 changed file
--- a/change-rows-color/babel.config.js
+++ b/change-rows-color/babel.config.js
+module.exports = {
+  // 声明 babel 可用的插件
+  // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
+  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
+}
--- a/change-rows-color/package-lock.json
+++ b/change-rows-color/package-lock.json
--- a/change-rows-color/package.json
+++ b/change-rows-color/package.json
+{
+  "name": "change-rows-color",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack serve",
+    "build": "webpack --mode production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "jquery": "^3.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "css-loader": "^5.2.6",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.2",
+    "less": "^4.1.1",
+    "less-loader": "^10.0.1",
+    "style-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.42.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  }
+}
--- a/change-rows-color/src/css/index.css
+++ b/change-rows-color/src/css/index.css
+li {
+  list-style: none;
+}
--- a/change-rows-color/src/css/index.less
+++ b/change-rows-color/src/css/index.less
+html,
+body,
+ul {
+  margin: 0;
+  padding: 0;
+  li {
+    line-height: 30px;
+    padding-left: 20px;
+    font-size: 12px;
+  }
+}
--- a/change-rows-color/src/images/logo.jpg
+++ b/change-rows-color/src/images/logo.jpg
--- a/change-rows-color/src/index.html
+++ b/change-rows-color/src/index.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>Document</title>
+  <!-- <script src="./index.js"></script> -->
+  <!-- <script src="../dist/main.js"></script> -->
+  <!-- <script src="../dist/bundle.js"></script> -->
+  <!-- 加载和引用内存中的 bundle.js -->
+  <!-- <script src="/bundle.js"></script> -->
+</head>
+
+<body>
+  <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>
+
+  <!-- 需求：把 /src/images/logo.jpg 设置给 src 属性 -->
+  <img src="" alt="" class="box">
+</body>
+
+</html>
\ No newline at end of file
--- a/change-rows-color/src/index1.js
+++ b/change-rows-color/src/index1.js
+// 1. 使用 ES6 导入语法，导入 jQuery
+import $ from 'jquery'
+
+// 导入样式（在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入和使用）
+// 如果某个模块中，使用 from 接收到的成员为 undefined，则没必要进行接收
+import '@/css/index.css'
+import '@/css/index.less'
+
+// 导入 src/js/test/info.js
+import '@/js/test/info.js'
+
+// 1. 导入图片，得到图片文件
+import logo from '@/images/logo.jpg'
+console.log(logo)
+// 2. 给 img 标签的 src 动态赋值
+$('.box').attr('src', logo)
+
+// 2. 定义 jQuery 的入口函数
+$(function () {
+  // 3. 实现奇偶行变色
+  // 奇数行为红色
+  $('li:odd').css('background-color', 'red')
+  $('li:even').css('background-color', 'pink')
+  // 0 是偶数
+  // 1 是奇数
+})
+
+// 定义装饰器函数
+function info(target) {
+  target.info = 'Person info.'
+}
+
+// 定义一个普通的类
+@info
+class Person {}
+
+console.log(Person.info)
--- a/change-rows-color/src/js/test/info.js
+++ b/change-rows-color/src/js/test/info.js
+// import msg from '../../msg'
+import msg from '@/msg.js'
+
+// 建议大家使用 @ 表示 src 源代码目录，从外往里查找；不要使用 ../ 从里往外查找
+//     @/msg.js
+
+console.log(msg)
--- a/change-rows-color/src/msg.js
+++ b/change-rows-color/src/msg.js
+export default {
+  msg: 'hello Vue.'
+}
--- a/change-rows-color/test/logo.jpg
+++ b/change-rows-color/test/logo.jpg
--- a/change-rows-color/test/test.html
+++ b/change-rows-color/test/test.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>Document</title>
+  </head>
+
+  <body>
+    <img src="./logo.jpg" alt="" />
+
+    <!-- 精灵图 -->
+    <img
+      src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAASABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBQIG/8QAJhAAAgICAgEBCQAAAAAAAAAAAQIAAwQRBSExBhITFCIjMkFRYf/EABgBAAIDAAAAAAAAAAAAAAAAAAQFAQID/8QAHREAAgMAAgMAAAAAAAAAAAAAAAECAxEEMRIyM//aAAwDAQACEQMRAD8ArcZwXtoMhGpINnulF7eW0D11/ZfxbGsutw8mlPl3sEb0QdESDE5tMTjhRS1RuFxsDsFYKNAdb/PUp05DPmF1tJZlYsQ3kkiAybeN9jiEUtSzCPkPT9nxROGv0mG9E/af1E6yeXai41h3Ygd6Y9GJvGVudAs66PJ6zEoZluUqSDvyDNzMZlw2ZWIOvIMRIv8AdFuJ85Hn/MRELFx//9k="
+      alt=""
+    />
+  </body>
+</html>
--- a/change-rows-color/webpack.config.js
+++ b/change-rows-color/webpack.config.js
+const path = require('path')
+
+// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
+const HtmlPlugin = require('html-webpack-plugin')
+// 2. new 构造函数，创建插件的实例对象
+const htmlPlugin = new HtmlPlugin({
+  // 指定要复制哪个页面
+  template: './src/index.html',
+  // 指定复制出来的文件名和存放路径
+  filename: './index.html'
+})
+
+// 注意：左侧的 { } 是解构赋值
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+// 使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象
+module.exports = {
+  // 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
+  // devtool: 'eval-source-map',
+  // 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
+  devtool: 'nosources-source-map',
+  // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
+  // 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
+  // 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
+  mode: 'development',
+  // entry: '指定要处理哪个文件'
+  entry: path.join(__dirname, './src/index1.js'),
+  // 指定生成的文件要存放到哪里
+  output: {
+    // 存放的目录
+    path: path.join(__dirname, 'dist'),
+    // 生成的文件名
+    filename: 'js/bundle.js'
+  },
+  // 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
+  plugins: [htmlPlugin, new CleanWebpackPlugin()],
+  devServer: {
+    // 首次打包成功后，自动打开浏览器
+    open: true,
+    // 在 http 协议中，如果端口号是 80，则可以被省略
+    port: 80,
+    // 指定运行的主机地址
+    host: '127.0.0.1'
+  },
+  module: {
+    rules: [
+      // 定义了不同模块对应的 loader
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      // 处理 .less 文件的 loader
+      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
+      // 处理图片文件的 loader
+      // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
+      // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
+      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
+      // 使用 babel-loader 处理高级的 JS 语法
+      // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
+      // 因为第三方包中的 JS 兼容性，不需要程序员关心
+      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
+    ]
+  },
+  resolve: {
+    alias: {
+      // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
+      '@': path.join(__dirname, './src/')
+    }
+  }
+}