项目初始化

71531252 · 澄清寰宇 · 71531252 · 71531252 · 71531252 · 71531252
15 changed file
--- a/.babelrc
+++ b/.babelrc
+{
+  "plugins": ["@babel/syntax-dynamic-import"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+dist/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# End of https://www.gitignore.io/api/node
+/.idea/.gitignore
+/.idea/inspectionProfiles/Project_Default.xml
+/.idea/its-cmp-web.iml
+/.idea/misc.xml
+/.idea/modules.xml
+/.idea/vcs.xml
+/src/its-cmp/package-lock.json
\ No newline at end of file
--- a/README.md
+++ b/README.md
+# 🚀 Welcome to your new awesome project!
+
+This project has been created using **webpack-cli**, you can now run
+
+```
+npm run build
+```
+
+or
+
+```
+yarn build
+```
+
+to bundle your application
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>scss-webpack</title>
+    <title>scss-webpack <%= htmlWebpackPlugin.options.title %>
+    </title>
+</head>
+
+<body>
+    <h1>Hello world!</h1>
+    <h2>Tip: Check your console</h2>
+    <div>scss-webpack</div>
+    <div class="title">
+        <p class="discript">描述信息</p>
+        <section>
+            <button id="a">a</button>
+        </section>
+        <section>
+            <button id="b">b</button>
+        </section>
+    </div>
+    <main class="main">
+        <img src="./src/assets/images/WX20211017-170519@2x.png" width="500px" style="display: block;">
+        <p id="c_11"></p>
+        <p id="c_12"></p>
+    </main>
+</body>
+
+<script>
+    /*  if ("serviceWorker" in navigator) {
+         window.addEventListener("load", () => {
+             navigator.serviceWorker
+                 .register("service-worker.js")
+                 .then((registration) => {
+                     console.log("Service Worker registered: ", registration);
+                 })
+                 .catch((registrationError) => {
+                     console.error("Service Worker registration failed: ", registrationError);
+                 });
+         });
+     } */
+</script>
+
+
+</html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "my-scss-learn",
+  "version": "1.0.0",
+  "description": "My webpack project",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server  --hot --open --port 8090 ",
+    "build": "webpack --mode=production --node-env=production",
+    "build:dev": "webpack --mode=development",
+    "build:prod": "webpack --mode=production --node-env=production",
+    "build:stats": "webpack --env production --json > stats.json",
+    "watch": "webpack --watch",
+    "serve": "webpack serve"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "cross-env": "^7.0.3",
+    "html-withimg-loader": "^0.1.16",
+    "jquery": "^3.6.0",
+    "lodash": "^4.17.21",
+    "node": "^16.10.0",
+    "node-sass": "^6.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@webpack-cli/generators": "^2.4.0",
+    "autoprefixer": "^10.3.7",
+    "babel-loader": "^8.2.2",
+    "compression-webpack-plugin": "^9.0.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^6.4.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.4.2",
+    "postcss": "^8.3.9",
+    "postcss-loader": "^6.2.0",
+    "prettier": "^2.4.1",
+    "sass": "^1.43.2",
+    "sass-loader": "^12.2.0",
+    "speed-measure-webpack-plugin": "^1.5.0",
+    "style-loader": "^3.3.0",
+    "thread-loader": "^3.0.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.58.2",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1",
+    "workbox-webpack-plugin": "^6.3.0"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
+module.exports = {
+  // Add you postcss configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
--- a/public/Bluray.ico
+++ b/public/Bluray.ico
--- a/src/assets/images/WX20211017-170519@2x.png
+++ b/src/assets/images/WX20211017-170519@2x.png
--- a/src/assets/js/a.js
+++ b/src/assets/js/a.js
+/*
+ * @Author: your name
+ * @Date: 2021-10-17 14:36:41
+ * @LastEditTime: 2021-10-19 21:43:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /web/scss/src/a.js
+ */
+const a = 'hello,a';
+module.exports = {
+    a,
+};
\ No newline at end of file
--- a/src/assets/js/b.js
+++ b/src/assets/js/b.js
+/*
+ * @Author: your name
+ * @Date: 2021-10-17 14:36:47
+ * @LastEditTime: 2021-10-17 14:53:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /web/scss/src/b.js
+ */
+const b = 'hello,b';
+module.exports = {
+    b
+};
\ No newline at end of file
--- a/src/assets/js/index.js
+++ b/src/assets/js/index.js
+/*
+ * @Author: your name
+ * @Date: 2021-10-16 21:08:11
+ * @LastEditTime: 2021-10-19 21:40:42
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /web/scss/src/index.js
+ */
+import '../scss/main.scss'
+console.log("Hello World!");
+import _ from 'lodash'
+import $ from 'jquery'
+document.getElementById('a').onclick = function () {
+    // alert(a);
+    /*  require.ensure([], function () {
+         let a = require('./a');
+         alert(a);
+     }) */
+    let myData = {
+        a: 111,
+        b: 'ssss',
+        parent: null,
+        id: 0,
+        child: [{
+                a: 111,
+                parent: 0,
+                b: 'ssss',
+                id: 1
+            },
+            {
+                a: 999,
+                parent: 0,
+                b: '深度复制',
+                id: 2
+            },
+            {
+                a: 444,
+                parent: 0,
+                b: 'ssss',
+                id: 2
+            }
+        ]
+    };
+    let myDataCopy = _.cloneDeep(myData);
+    import('./a').then(data => {
+        console.log(data);
+        let c_11 = document.getElementById("c_11");
+        c_11.innerHTML = JSON.stringify(myDataCopy);
+        $(c_11).css({
+            background: "red",
+            color: "#000",
+            padding: "4px 6px"
+        })
+        let ajs = $.ajax({
+            type: "GET",
+            data: '',
+            url: '/awx/ws/district/v1/list?key=K3VBZ-M6WWV-PPSPY-UVGGC-DRM2Z-PGBMV',
+            success: function (res) {
+                let c_12 = document.getElementById("c_12");
+
+                c_12.innerHTML = JSON.stringify(res);
+            }
+        });
+
+
+
+        alert(data.a);
+    })
+};
+document.getElementById('b').onclick = function () {
+    /* require.ensure([], function () {
+        let b = require('./b');
+        alert(b);
+    }) */
+    import('./b').then(data => {
+        console.log(data);
+        alert(data.b);
+    })
+};
\ No newline at end of file
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
+$blue:#1875e7;
+$red:#ff0f00;
+$flex:flex;
+div.title{
+    color:$blue;
+    display: flex;
+    section{
+        flex: 1;
+    }
+}
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
+/*
+ * @Author: your name
+ * @Date: 2021-10-16 21:01:00
+ * @LastEditTime: 2021-10-19 21:30:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /web/scss/webpack.config.js
+ */
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const {
+    CleanWebpackPlugin
+} = require('clean-webpack-plugin') // 引入CleanWebpackPlugin插件
+const CompressionPlugin = require("compression-webpack-plugin");
+const isProduction = process.env.NODE_ENV == "production";
+
+const stylesHandler = MiniCssExtractPlugin.loader;
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const config = {
+    entry: "./src/assets/js/index.js",
+    output: {
+
+        path: path.resolve(__dirname, "dist"),
+        filename: 'js/[name].[contenthash:8].js',
+        //filename: 'myfundations.js',
+        //filename: 'libraryName.js',
+        //library,libraryTarget,fileName输出一个lib，其中library配置输出文件导出的名称，libraryTarget是使用那种模式导出，比如window，this,commonjs,commonjs2,global
+        //library: 'LibraryName',
+        // libraryTarget: 'commonjs'
+        // libraryTarget:'var',
+        //libraryTarget: 'commonjs2'
+        //libraryTarget: 'this',
+        // libraryTarget: 'window'
+        //libraryTarget: 'var'
+
+    },
+    devServer: {
+        open: true,
+        host: "localhost",
+        proxy: {
+            '/awx': {
+                changeOrigin: true,
+                //ws: true, // proxy websockets
+                target: "http://apis.map.qq.com/",
+                pathRewrite: {
+                    '^/awx': '/'
+                }
+
+            }
+        }
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "index.html",
+            // 压缩HTML
+            minify: {
+                // 移除空白
+                collapseWhitespace: true,
+                // 移除注释
+                removeComments: true,
+                // 移除属性中的双引号
+                removeAttributeQuotes: true
+            },
+            title: 'index首页',
+            meta: {
+                viewport: 'width=device-width'
+            },
+            inject: true, // script是否至于body底部
+            filename: 'index.html',
+            // cache: false,
+            //chunks: ['index'], // 指定加载js文件，默认全部加载
+            // showErrors: true,                // 如果 webpack 编译出现错误，webpack会将错误信
+        }),
+        new MiniCssExtractPlugin({
+            filename: 'css/[name]-[hash:10].css'
+        }),
+        new CleanWebpackPlugin(),
+        new webpack.LoaderOptionsPlugin({
+            // test: /\.xxx$/, // may apply this only for some modules
+            options: {
+                chainWebpack: config => {
+                    config.optimization.splitChunks({
+                        chunks: 'all',
+                        cacheGroups: {
+                            vendors: {
+                                name: 'chunk-vendors',
+                                test: /[/]node_modules[/]/,
+                                priority: 10,
+                                chunks: 'initial'
+                            },
+                            iview: {
+                                name: 'chunk-iview',
+                                priority: 20,
+                                test: /[/]node_modules[/]_?iview(.*)/
+                            },
+                            echarts: {
+                                name: 'chunk-echarts',
+                                priority: 20,
+                                test: /[/]node_modules[/]_?echarts(.*)/
+                            },
+                            commons: {
+                                name: 'chunk-commons',
+                                minChunks: 2,
+                                priority: 5,
+                                chunks: 'initial',
+                                reuseExistingChunk: true
+                            }
+                        }
+                    })
+                },
+                alias: {
+                    '@': path.resolve(__dirname, 'src'),
+                    '@config': path.resolve(__dirname, 'config'),
+                }
+            }
+        }),
+        new CopyWebpackPlugin({
+            patterns: [{
+                from: path.resolve(__dirname, './public/*.ico'),
+                to: "./"
+            }, ],
+        }),
+        new CompressionPlugin({
+            filename: "[path][base].gz",
+            algorithm: 'gzip',
+            test: new RegExp('\\.(js|css)$'),
+            threshold: 10240,
+            minRatio: 0.8
+        }),
+        new BundleAnalyzerPlugin()
+        // Add your plugins here
+        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        noParse: /jquery|lodash/,
+        rules: [{
+                test: /\.(js|jsx)$/i,
+                //loader: "babel-loader",
+                use: ['thread-loader', 'babel-loader'],
+
+                exclude: /node_modules/,
+                include: path.resolve(__dirname, './src/assets/js')
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [stylesHandler, {
+                    loader: "css-loader",
+
+                }, {
+                    loader: "postcss-loader",
+                }, {
+                    loader: "sass-loader"
+                }],
+                exclude: /node_modules/,
+                include: path.resolve(__dirname, './src/assets/scss')
+            },
+            {
+                test: /\.css$/i,
+                use: [{
+                        loader: stylesHandler,
+                    }, {
+                        loader: "css-loader",
+
+                    },
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            ident: 'postcss',
+                            plugins: () => [
+                                //postcss的插件,帮助postcss找到package.json中browserlist里面的配置，通过配置加载指定的css兼容性样式
+                                /**
+                                 * "browserslist": {
+                                 * // 生产环境的配置：默认情况下是根据生产环境指定配置
+                                    "production": [
+                                      ">0.2%",
+                                      "not dead",
+                                      "not op_mini all"
+                                    ],
+                                    // 开发环境的配置
+                                    "development": [
+                                        //兼容最近一个版本的 Chrome
+                                      "last 1 chrome version",
+                                      //兼容最近一个版本的 Firefox
+                                      "last 1 firefox version",
+                                      //兼容最近一个版本的Safari
+                                      "last 1 safari version"
+                                    ]
+                                  }
+                                 */
+                                require('postcss-preset-env')()
+                            ]
+                        }
+                    }
+                ],
+            },
+            {
+                test: /\.(eot|svg|ttf|woff|woff2)$/i,
+                type: "asset",
+            },
+            {
+                // 处理html中img资源
+                test: /\.html$/,
+                loader: 'html-loader',
+                options: {
+                    esModule: false,
+                }
+            },
+            {
+                test: /\.(jpg|png|jpe?g|gif)$/,
+                use: {
+                    loader: 'url-loader',
+                    options: {
+                        limit: 8 * 1024, //限制 8kb 以下使用base64
+                        esMoudle: false,
+                        name: '[name]-[hash:10].[ext]',
+                        // 打包到/images目录下
+                        outputPath: 'images',
+                        exclude: /node_modules/,
+                        include: path.resolve(__dirname, './src/assets/images')
+                    }
+                }
+            },
+            {
+                // 处理其他资源
+                test: /\.(txt|mp3|mp4|mpg|swf|m4a|wap)/,
+                loader: 'file-loader',
+                options: {
+                    name: '[hash:10].[ext]',
+                    outputPath: 'media'
+
+                }
+            }
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+    optimization: {
+        splitChunks: {
+            chunks: 'all', // 表示要分割的chunk类型：initial只处理同步的; async只处理异步的；all都处理
+            minSize: 0, // 代码分割最小的模块大小，引入的模块大于 30000B 也就是30kb 才做代码分割
+            maxSize: 30000, // 代码分割最大的模块大小，大于这个值要进行代码分割，一般使用默认值
+            minChunks: 1, // 引入的次数大于等于1时才进行代码分割
+            maxAsyncRequests: 6, // 最大的异步请求数量,也就是同时加载的模块最大模块数量
+            maxInitialRequests: 4, // 入口文件做代码分割最多分成 4 个 js 文件
+            automaticNameDelimiter: '~', // 文件生成时的连接符
+            // 缓存分组
+            cacheGroups: {
+                // 第三方模块
+                vendors: {
+                    name: 'vendors', // chunk名称
+                    test: /node_modules/, // 设置命中目录规则
+                    priority: 1, // 优先级，数值越大，优先级越高
+                    minSize: 0, // 小于这个大小的文件，不分割
+                    minChunks: 1 // 最少复用几次，这里意思是只要用过一次就分割出来
+                },
+                // 公共模块
+                common: {
+                    name: 'common',
+                    minChunks: 2,
+                    priority: 0,
+                    minSize: 0,
+                    minChunks: 2 // 只要引用过2次，就分割成公共代码
+                },
+                // 分割，，既满足 vendors，又满足 default，那么根据优先级会打包到 vendors 组中。
+                default: { // 没有 test 表明所有的模块都能进入 default 组，但是注意它的优先级较低。
+                    priority: -20, //  根据优先级决定打包到哪个组里,打包到优先级高的组里。
+                    reuseExistingChunk: true // //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块
+                }
+            },
+
+
+
+        }
+    },
+    mode: "production",
+
+
+};
+
+
+module.exports = () => {
+    if (isProduction) {
+        config.mode = "production";
+
+        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
+    } else {
+        config.mode = "development";
+    }
+    return config;
+};
\ No newline at end of file
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
+/*
+ * @Author: 尹鹏孝
+ * @Date: 2021-10-17 10:36:13
+ * @LastEditTime: 2021-10-17 10:40:12
+ * @LastEditors: Please set LastEditors
+ * @Description: webpack生产打包- web pack5+
+ * @FilePath: /web/scss/webpack.config.prod.js
+ */
+const path = require('path');
+module.exports = {
+    mode: 'production',
+    entry: "./src/index.js"
+}
\ No newline at end of file