前端辉羽
前端辉羽

Webpack打包文件分类与url修正（原理讲解）

在原来的文章中我们把打包的东西都存放到了dist目录下，并没有进行分类存储，乱成一团，现在我们需要处理一下打包的路径，让打包后的目录看起来更加优雅。

代码准备

我们先建立起这样一个目录结构

├── node_modules
├── src
    | ├── assets
        | └── css
            | └── index.css
        | └── img
            | └── noding.jpg
        | └── js
            | └── index.js
    | └── index.html
├── .babelrc
├── package-lock.json
├── package.json
├── webpack.config.js
└── dist

我们在src/index.html中输入一段代码




    
    
    
    Document

接下来在assets/js/index.js中输入下面代码

// 引入icon图标字体
import "font-awesome/css/font-awesome.css"
// 引入图片
import imgSrc from '../img/nodeing.jpg'
// 把图片插入到html文件中
document.getElementById("box").innerHTML = ''

然后去webpack.config.js中去修改一下入口文件位置
接下来，我们去测试一下打包效果

npm run dev

所有文件都打包到dist目录下，接下来，我们需要去优化webpack配置，让打包出来的文件不那么混乱

webpack配置

把js文件分类

我们希望打包出来的文件也像src目录一样能够分门别类的存放，首先，我们把本来的js单独放进assets/js文件夹下，这时我们需要修改webpack配置文件,把输出目录改掉

output: {
    path: path.resolve(__dirname, 'dist/assets'),
        //上面这个path代表webpack默认会把所有的文件都打包进assets文件夹中
        //上面这个是一个所有打包文件输出位置的公用路径
    filename: 'js/my-first-webpack.bundle.js'
},

运行npm run dev 查看效果，发现dist目录下多出了一个assets文件，并且已经建立好了js文件夹，
app.js也被放进来了，但是，原来打包出来的那些文件还在，这时候，dist目录就更乱了，我们希望每次打包生成的文件都是最新的，得手动去删除上次打包出来的文件，像这种手动删除dist目录的操作，
我们可以交给webpack相关插件来完成，这个插件叫clean-webpack-plugin
安装clean-webpack-plugin插件

npm install clean-webpack-plugin --save

修改webpack配置文件，引入clean-webpack-plugin插件
webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 引入clean-webpack-plugin插件*************************************
const CleanWebpackPlugin = require("clean-webpack-plugin")
module.exports = {
    entry: "./src/assets/js/index.js",
    output: {
        path: path.resolve(__dirname, 'dist/assets'),
        filename: 'js/app.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
    }),
// 使用插件，设置需要清除的目录*******************************************
        new CleanWebpackPlugin(['dist'])
        ],
    devServer: {
        open: true
    },
    module: {
        rules: [
            {
            test: /\.js$/,
            use:['babel-loader'],
            exclude: path.resolve(__dirname, 'node_modules')
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        // 处理文字
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            use: 'file-loader'
        },
        {
            test: /\.(jpg|png|gif|webp|bmp)$/,
            use: [{
                loader: 'url-loader',
                options: {
                limit: 10240
                }
            }]
        }
    ]
}
}

这个时候你会发现，每次运行npm run dev，这个插件就会先把上次的dist目录删除，然后再新建一个dist目录，把新打包的文件放里面
以上步骤，我们把js文件放到了assets/js目录下，但随之而来的就是，所有的文件都被打包到assets这个目录下了，我们不希望index.html这个文件也被打包进assets目录下，而是像在src目录下一样，它们应该是同级的，所以我们需要修改一下 index.html被输出的路径

plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
        // 这里表示往外回退一层
        filename: '../index.html'
    }),
    new CleanWebpackPlugin(['dist'])
],

把字体文件分类

修改webpack配置文件，给字体文件增加输出规则

// 处理文字 
{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use: [{
        loader: "file-loader",
        options: {
            name: 'fonts/[name]_[hash:4].[ext]'
        }
    }]
},

其中，[name]、[hash]、[ext]都是可变的，name表示原来的文件名字，hash表示生成的hash值，
hash:4表示可以限定hash字符串的位数，ext表示原来文件的扩展名(文件后缀)

把图片文件分类

修改webpack配置文件，给图片文件增加输出规则

{
    test: /\.(jpg|png|gif|webp|bmp)$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 10240,
            name: 'img/[name]_[hash:4].[ext]'
        }
    }]
}

因为，ulr-loader是对file-loader的封装，其中的[name]、[hash]、[ext]表示的意思和file-loader中表示的意思是一样的

把css文件分类

css文件是打包进js文件的，如果需要单独打包出来，需要安装另一个插件，extract-text-webpack-plugin

npm install extract-text-webpack-plugin --save-dev

这个插件的使用规则和其他plugin差不多，首先需要引入插件
webpack.config.js

var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

其次，是需要实例化对象，并且传入配置项，然后将实例化出来的这个对象加入到plugins选项中

var extractcss = new ExtractTextWebpackPlugin({
    //打包输出的路径↓
    filename: 'css/index.css'
})

plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: './index.html'
    }),
    new CleanWebpackPlugin(['dist']),
    // 这⾥是前面实例化得到的对象↓
    extractcss
],

最后，需要修改css输出规则

{
    test: /\.css$/,
    use: extractcss.extract({
        fallback:'style-loader',
        use:['css-loader']
    })
},

修正url地址

先分析一下webpack.config.js中的devServer

devServer:{
    //当服务器启动的时候，自动帮助我们打开浏览器
    open: true,
        //服务器启动的端口地址
    port: 8090,
        //访问的本地目录是哪个
    contentBase: './dist'
}

上面所有的webpack配置好了之后，我们在终端用npm start启动服务时，发现根本访问不了dist文件，因为
1.当服务启动的时候，CleanWebpackPlugin这个插件的配置，就会把dist目录删除
2.而npm start并不会再次生成dist，但是内存中是有dist的，为什么访问不了？
解决办法
当服务启动的时候，wenbpack-dev-server会把资源打包到内存
npm start会优先访问内存中output.path:path.resolve(__dirname,'dist/assets')设置的输出路径，而为什么访问不了内存中的资源？
举例：当我们在浏览器中输入http://localhost:8090/ ,访问的是内存中的dist/assets
当我们在浏览器中输入http://localhost:8090/js/my-first-webpack.bundle.js，访问的是内存中的dist/assets/js/my-first-webpack.bundle.js.js
这样的话，我们发现，我们只可以访问到assets目录下的内容，却访问不到和assets同级的内容
当我们把各种类型的文件分类好以后，运行打包出来的index.html，发现图片、字体、css等的路径是不正确的，没办法正常工作，这个时候，我们需要用output配置项下的 publicPath来修正一下

output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'js/app.js',
    publicPath: 'assets/'
},

其中，publicPath设置的是所有静态资源的基础目录，要快速理解它，可以记住下面的公式：
静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径

举例说明,我们在各种loader中设置的路径如下：

// css输出路径
name: 'css/[name]_[hash:4].[ext]'
// 图片输出路径
name: 'img/[name]_[hash:4].[ext]'
// 字体文件输出路径
name: 'fonts/[name]_[hash:4].[ext]'
// js文件输出路径
filename: 'js/app.js'

设置的output.publicPath为 "assets/", 那么最终的访问路径就是output.publicPath+loader设置的路径，例如图片路径就会是 assets/img/[name]_[hash:4].[ext]
devServer.publicPath这个选项是webpack-dev-server服务器的访问路径，我们知道当webpack-dev-server启动后，会把资源打包到内存，你不需要关注它在内存中的什么地方，你可以理解为打包后的资源也被输出了，只是输出到内存中，你无法在硬盘上看到而已，但是它提供了一个地址来供我们访问，devServer.publicPath就是用来设置访问内存中被打包出来的资源地址的，举例说明：

output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'js/my-first-webpack.bundle.js',
    },
devServer: {
    open: true,
    publicPath: '/aa'
},
其他配置省略...

像上面这种配置，当服务器启动的时候，如果想访问到内存中的my-first-webpack.bundle.js,那么需要通过http://localhost:8090/aa/js/my-first-webpack.bundle.js
当前的完整的webpack配置是这样的

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
module.exports = {
    entry: "./src/assets/js/index.js",
    output: {
        path: path.resolve(__dirname, 'dist/assets'),
        filename: 'js/my-first-webpack.bundle.js',
        //资源的基础路径，设置什么值就会在原来的路径前面加上这个值
        //注意：不是在打包输出的文件夹前面加，而是资源在最终访问的时候加
        publicPath: 'assets/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: '../index.html'
        }),
        new CleanWebpackPlugin(['dist'])
        ],
        devServer: {
            open: true,
            containtBase: 'src/'
            publicPath: '/aa'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use:['babel-loader'],
                exclude: path.resolve(__dirname, 'node_modules')
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        name: 'css/[name]_[hash:4].[ext]'
                    }
                }
            ]
        },
        // 处理⽂字
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            use: [{
                loader: "file-loader",
                options: {
                    name: 'fonts/[name]_[hash:4].[ext]'
                }
            }]
        },
    {
            test: /\.(jpg|png|gif|webp|bmp)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 10240,
                    name: 'img/[name].[ext]'
                }
            }]
        }
    ]
    }
}

我们来解读几条关键的配置：
1.output.path: path.resolve(__dirname, 'dist/assets'), 这条配置是打包后资源输出的目录，
同样的当webpack-dev-server启动后，资源会打包到内存，用不太严谨但通俗的话来说你可以认为所有文件被打包到这个目录，只是这个目录放在内存而不是输出到硬盘，你访问这个目录里面的文件的时候，路径和打包到硬盘是看到的路径一样，例如：在硬盘上 dist/assets/js/app.js, 在内存中也通过这种目录结构访问就是了
2.output.publicPath: 'assets/'，是静态资源的基础路径
3.devServer.publicPath: '/aa', 这个配置是服务器访问内存的虚拟路径， http://localhost:8080/aa 这个地址，你可以认为是映射到了output.path设置的目录，不太严谨但通俗的说，你可以认为http://localhost:8080/aa这个地址指向了这个目录（dist/assets/），那么你在http://localhost:8080/aa后面加 /js/app.js 就相当于访问 dist/assets/js/app.js，所以启动以后通过http://localhost:8080/aa/js/app.js是可以访问到这个js文件的
4.devServer.contentBase设置的是本地目录（在内存中找不到的时候去硬盘上找）
5.filename: '../index.html'，这个在HtmlWepackPlugin中的配置，设置了被打包出来的html位置，../表示往上一层返回，那就意味着，最终打包出来的结构是这样的：

├── dist
| ├── assets
|   ├── css
|   ├── img
|   ├── js
| ├── index.html
|

我们通过http://localhost:8080/aa （devServer.publicPath属性定义的映射）能访问到dist/assets目录，也可以访问该目录下层级更深的文件，只需要在http://localhost:8080/aa 后面加文件路径就可以了，但是却永远无法返回到上层目录去访问到index.html
当访问不到内存中的index.html⽂件，webpack-dev-server就会去访问本地的路径，这个本地的路径就是devServer.containtBase: 'src/'这个选项设置的，所以npm start的时候，直接打开的是项目下的src目录
好了，问题原因已经找出来了，接下来我们需要修改以下webpack配置，具体的思路就是

    1. 输出目录往上挪动一层 output.path 设置成 path.resolve(__dirname, 'dist'),
    1. 在每个loader上加深一层 js加深一层是这样的 assets/js/app.js 图片加深一层是这样的 assets/img/...,其他，同理
    1. ../index.html 改为当前目录 ./index.html
    1. output.publicPath的值设置成和devServer.publickPath的值一样，不然静态资源的访问地址会出错，返回404

这样做，原来打包输出的目录变成了dist目录，而不是原来的dist/assets目录， 那么http://localhost:8090/aa 这个地址指向的内存虚拟目录就是 dist目录，那么通过http://localhost:8090/aa/index.html 就可以访问到内容了
具体完整配置如下：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
module.exports = {
    entry: "./src/assets/js/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'assets/js/my-first-webpack.bundle.js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new CleanWebpackPlugin(['dist'])
    ],
    devServer: {
        open: true,
        publicPath: '/'
    },
    module: {
    rules: [
        {
            test: /\.js$/,
            use:['babel-loader'],
            exclude: path.resolve(__dirname, 'node_modules')
        },
        {
            test: /\.css$/,
            use: [
            'style-loader',
        {
            loader: 'css-loader',
            options: {
                name: 'assets/css/[name]_[hash:4].[ext]'
            }
        }
    ]
},
// 处理文字
{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use: [{
        loader: "file-loader",
        options: {
            name: 'assets/fonts/[name]_[hash:4].[ext]'
            }
        }]
    },
{
        test: /\.(jpg|png|gif|webp|bmp)$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 10240,
                name: 'assets/img/[name].[ext]'
                }
            }]
        }
    ]
}
}

通常output.publicPath和devServer.publicPath设置成 "/",这样我们就可以通过 http://localhost:8090/ 来访问打包出来的index.html文件了。

你可能感兴趣的:(Webpack打包文件分类与url修正（原理讲解）)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
    如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
  • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
    扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码 说私域 人工智能小程序
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
  • 2021-08-26 影幽
    在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿 小鹿_33
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • 每日一题——第九十题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：判断子串是否与主串匹配#include#include#include//////判断子串是否在主串中匹配//////主串///子串///boolisSubstring(constchar*str,constchar*substr){intlenstr=strlen(str);//计算主串的长度intlenSub=strlen(substr);//计算子串的长度//遍历主字符串，对每个可能得
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • WPF中的ComboBox控件几种数据绑定的方式 互联网打工人no1 wpfc#
    一、用字典给ItemsSource赋值（此绑定用的地方很多，建议熟练掌握）在XMAL中：在CS文件中privatevoidBindData(){DictionarydicItem=newDictionary();dicItem.add(1,"北京");dicItem.add(2,"上海");dicItem.add(3,"广州");cmb_list.ItemsSource=dicItem;cmb_l
  • 《庄子.达生9》 钱江潮369
    【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
  • 水泥质量纠纷案代理词 徐宝峰律师
    贵州领航建设有限公司诉贵州纳雍隆庆乌江水泥有限公司产品质量纠纷案代理词尊敬的审判长、审判员：贵州千里律师事务所接受被告贵州纳雍隆庆乌江水泥有限公司的委托，指派我担任其诉讼代理人，参加本案的诉讼活动。下面，我结合本案事实和相关法律规定发表如下代理意见，供合议庭评议案件时参考：原告应当举证证明其遭受的损失与被告生产的水泥质量的因果关系。首先水泥是一种粉状水硬性无机胶凝材料。加水搅拌后成浆体，能在空气中
  • Goolge earth studio 进阶4——路径修改与平滑 陟彼高冈yu Googleearthstudio进阶教程旅游
    如果我们希望在大约中途时获得更多的城市鸟瞰视角。可以将相机拖动到这里并创建一个新的关键帧。camera_target_clip_7EarthStudio会自动平滑我们的路径，所以当我们通过这个关键帧时，不是一个生硬的角度，而是一个平滑的曲线。camera_target_clip_8路径上有贝塞尔控制手柄，允许我们调整路径的形状。右键单击，我们可以选择“平滑路径”，这是默认的自动平滑算法，或者我们可
  • linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
    本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
  • 将cmd中命令输出保存为txt文本文件 落难Coder Windowscmdwindow
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
  • 下载github patch到本地 小米人er 我的博客gitpatch
    以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
  • 基于社交网络算法优化的二维最大熵图像分割 智能算法研学社（Jack旭） 智能优化算法应用图像分割算法php开发语言
    智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
  • 使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器） 编程经验分享 开发工具服务器sshlinux
    目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 山东大学小树林支教调研团青青仓木队——翟晓楠 山东大学青青仓木队
    过了半年，又一次启程，又一次回到支教的初心之地。比起上一次的试探与不安，我更多了一丝稳重与熟练。心境、处境也都随着半个学期的过去而变得不同，半个学期中，身体上的，心理上的，太多的逆境让我变得步履维艰，曲曲折折，弯弯绕绕，我仿佛打不起精神，没有胃口，没有动力。感觉走的不顺畅的时候，支教这个旅程，给了我力量。自告奋勇承担起队长这一职务的我，从组织时的复杂和困难的经历，协调各种问题，从无到有，和校长和队
  • 直返最高等级与直返APP：无需邀请码的返利新体验 古楼
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
  • C/C++Win32编程基础详解视频下载 择善Zach 编程C++Win32
    课题视频：C/C++Win32编程基础详解 视频知识：win32窗口的创建                   windows事件机制 主讲：择善Uncle老师 学习交流群：386620625 验证码：625 --
  • Guava Cache使用笔记 bylijinnan javaguavacache
    1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常 我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。 实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
  • 解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
    解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程 一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。 分析过程：    既然是temp表空间有问题，那当
  • Struct在jsp标签 不懂事的小屁孩 struct
    非UI标签介绍： 控制类标签： 1：程序流程控制标签   if   elseif    else <s:if test="isUsed"> <span class="label label-success">True</span> </
  • 按对象属性排序 换个号韩国红果果 JavaScript对象排序
    利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
  • 大数据分析让个性化的客户体验不再遥远 蓝儿唯美 数据分析
    顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。 分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。 挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。 然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
  • java笔记4 a-john java
    操作符 1，使用java操作符       操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。       操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
  • 从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
        笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。     笔者因此写上自己的学习心得，希望能给和我一样转变
  • 在springmvc中解决FastJson循环引用的问题 asialee 循环引用fastjson
              我们先来看一个例子：           package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
  • ArrayAdapter和SimpleAdapter技术总结 百合不是茶 androidSimpleAdapterArrayAdapter高级组件基础
    ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果   ArrayAdapter;的数据可以是数组或者是队列        // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
  • 九封信 bijian1013 人生励志
            有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。         2014，写给人
  • Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHPInstallphpMyAdmin
    PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64   一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244   二、安装依赖包 sudo yum install gd
  • 分布式系统理论 bit1129 分布式
    FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
  • ssh2整合(spring+struts2+hibernate)-附源码 白糖_ eclipsespringHibernatemysql项目管理
    最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库   项目用eclipse
  • treetable bug记录 braveCS table
    // 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
  • 编程之美-电话号码对应英语单词 bylijinnan java算法编程之美
    import java.util.Arrays; public class NumberToWord { /** * 编程之美 电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
  • jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
    1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
  • JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动J#
      对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析   /*  流程图拓扑结构解析伪码描述算法         public java.util.ArrayList DFS(String graphid, String stepid, int j)
  • oracle I/O 从属进程 daizj oracle
    I/O 从属进程 　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
  • 高级排序:希尔排序 dieslrae 希尔排序
    public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
  • 初二下学期难记忆单词 dcj3sjt126com englishword
    kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的   Indian 印度的 workplace  工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
  • Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
    目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
  • git命令 shuizhaosi888 git
    ---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "[email protected]" //设置邮箱 ---------------查看环境配置 git config --li
  • qemu-kvm 网络 nat模式 (四) haoningabc kvmqemu
    qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
  • 不要让未来的你，讨厌现在的自己 jingjing0907 生活 奋斗 工作 梦想
     故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
  • 枚举类型详解 一路欢笑一路走 enum枚举详解enumsetenumMap
    枚举类型详解 一.Enum详解      1.1枚举类型的介绍   JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。      Demo:一个最简单的枚举类   public enum ColorType { RED
  • 第11章 动画效果（上） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipsejsp卡死js卡死
    使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下：   1、取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉，build下只留 classpath dependency Valida
  • MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
    每一行命令都是用分号(;)作为结束 对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
  • zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
    题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。 解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。 判断函数里面做了3次bfs，但是每次bfs节点最多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他