Nicccce

webpack4.x快速入门

近期看了webpack4.0的教程，以下是视频学习整理，供大家参考
视频地址：https://www.bilibili.com/video/av41546218
视频中的笔记见：https://malun666.github.io/aicoder_vip_doc/#/pages/vip_2webpack
webpack中文文档：https://www.webpackjs.com/
我根据视频教程的学习，截止到第15个视频，实践的代码及配置详见：
https://github.com/Niccce/webpackLearning/blob/master/webpackdemo/webpack4.x%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.md

文章目录

前言

webpack是什么
loader
模块（modules）

1.Webpack快速入门demo

创建demo

2.webpack处理css模块
3.webpack的模块和sass
4.webpack的sass添加c3前缀和sourcemap处理

Source Map处理
为样式添加前缀（-webkit-等等）

5.webpack的css提取成单独的文件
6.webpack的css和js压缩插件使用

压缩CSS
压缩JS

7.解决文件名带哈希值的问题

为什么要让文件带上哈希值？

方法

优化

8.清理dist目录插件clean-webpack-plugin应用
9.图片处理及优化

file-loader处理文件的导入
优化图片，使用image-webpack-loader可以帮助我们对图片进行压缩和优化。

10.图片base64优化和字体处理
11.webpack的配置合并、提前公共配置
12.webpack的启动监控自动编译和启用js的sourcemap

启用js的sourcemap
监控文件变化，自动编译，使用观察模式

13.webpack的启动热更新和代理配置
14.webpack的代理服务器设置和babel转换及优化

babel转码
babel优化

15.webpack的eslint校验配置

前言

webpack是什么

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

模块（modules）

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
- 样式(url(...))或 HTML 文件()中的图片链接(image url)

1.Webpack快速入门demo

webpack最好安装在项目中，若全局安装，就都是全局安装的版本，但是有一些老项目可能是用老版本的webpack开发的。
webpack官方文档写到：不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

4.0之前的版本安装webpack就可以了，但是4.0之后的版本需要再安装webpack-cli

创建demo

新建一个空的文件夹wpdemo
打开终端，输入npm init -y，初始化package.json文件
在终端输入npm i -D webpack本地安装webpack
在终端输入npm i -D webpack-cli安装webpack-cli
新建dist文件夹及其中的index.html；新建src文件夹机器中的index.js
在终端输入npm i lodash -P安装lodash

编写html.js文件

import _ from 'lodash';

function createDomELement() {
    let dom = document.createElement('div');
    //使用了loadsh 的 join() 方法,将 字符串 用 空格进行 拼接   
    dom.innerHTML = _.join(['你好', 'webpack'], '');
    return dom;
}
document.body.appendChild(createDomELement());

在根目录下新建文件webpack.config.js

编写webpack.config.js

const path = require('path');   //引用path模块

//对外导出一个对象
module.exports = {
    entry: './src/index.js',    //入口
    mode: 'development',        //代表我们现在是开发阶段
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname,'dist')//最终main.js在哪个文件夹下
    }
}

执行npx webpack进行打包，dist中出现了main.js文件

编写dist中的index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script src="./main.js">script>
body>
html>

注：这个demo也可以看webpack的中文文档实例
https://www.webpackjs.com/guides/installation/

2.webpack处理css模块

webpack默认处理不了css文件，需要对应的loader去解析
css-loader可以让webpack解析css模块
style-loader可以帮我们把依赖的的css文件转换成style标签，加入到html文件中去

在src中新建style文件夹及其中的index.css文件
```
.box{
    color: yellow;
}
```

将样式给指定元素，修改index.js

import _ from 'lodash';
import './style/index.css';

function createDomELement() {
    let dom = document.createElement('div');
    //使用了loadsh 的 join() 方法,将 字符串 用 空格进行 拼接   
    dom.innerHTML = _.join(['你好', 'webpack'], '');
    // dom.className = 'box';
    dom.classList.add('box');
    return dom;
}
document.body.appendChild(createDomELement());

安装：npm i -D style-loader css-loader

修改webpack.config.js

const path = require('path');   //引用path模块

//对外导出一个对象
module.exports = {
    entry: './src/index.js',    //入口
    mode: 'development',        //代表我们现在是开发阶段
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname,'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.css$/,//当引入的模块的后缀满足这个，就使用use的loader处理
                use: ['style-loader', 'css-loader'] //处理顺序从右向左
            }
        ]
    }
}

执行npx webpack查看效果

拓展：修改package.json文件，可以用npm run build代替npx webpack

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack"
  }

3.webpack的模块和sass

https://www.webpackjs.com/configuration/module/#rule-test

加载sass需要sass-loader
sass-loader需要node-sass

安装npm i -D sass-loader node-sass
此处可能会有遇到node-sass安装失败的问题,详见：https://blog.csdn.net/qq_41445033/article/details/100032529

修改webpack.config.js

const path = require('path');   //引用path模块

//对外导出一个对象
module.exports = {
    entry: './src/index.js',    //入口
    mode: 'development',        //代表我们现在是开发阶段
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname,'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: ['style-loader', 'css-loader','sass-loader']
                //处理顺序从右向左
            }
        ]
    }
}

普通的css文件也可以经过sass-loader处理

假设在style文件夹中添加一个a.scss文件

$bgcolor:red;

.box{
    background-color: $bgcolor;
    font-size: 30px;
}

在index.js，导入a.scss
```
import './style/a.scss'
```
执行npx webpack查看效果

4.webpack的sass添加c3前缀和sourcemap处理

Source Map处理

Source Map可以帮助我们在使用浏览器的开发者工具查看元素的样式时，追踪到样式的来源
如果没有开启source map，查看样式来源的时候只能看到来自

方法：
修改webpack.config.js文件

    module: {
        rules: [//模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }]
            }
        ]
    }

为样式添加前缀（-webkit-等等）

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具，是一个css的预处理工具
- 可以帮助我们
  - 给CSS3的属性添加前缀
  - 样式格式校验（stylelint）
  - 实现CSS的模块化，防止CSS样式冲突等

比较常用的就是使用 PostCSS 进行添加前缀，以此为例：

安装postcss-loader
npm i -D postcss-loader

接下来，我们需要引用什么插件，就要把什么插件装上,我们需要添加前缀
npm install autoprefixer --save-dev

npm i -D postcss-loader
npm install autoprefixer --save-dev

# 以下可以不用安装
# cssnext可以让你写CSS4的语言，并能配合autoprefixer进行浏览器兼容的不全，而且还支持嵌套语法
$ npm install postcss-cssnext --save-dev
# 类似scss的语法，实际上如果只是想用嵌套的话有cssnext就够了
$ npm install precss --save-dev
# 在@import css文件的时候让webpack监听并编译
$ npm install postcss-import --save-dev

修改webpack.config.js文件

module: {
    rules: [                //模块处理规则
        {
            test: /\.(sc|c|sa)ss$/,
            //当引入的模块的后缀满足这个，就使用use的loader处理
            use: [//处理顺序从后向前
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        sourceMap: true,
                        plugins: loader => [
                            require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                        ]
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true
                    }
                }]
        }
    ]
}

修改a.sass

$bgcolor:red;

.box{
    background-color: $bgcolor;
    font-size: 30px;
    display: flex;
}

运行查看效果,F12看样式，可以看到

.box {
    background-color: red;
    font-size: 30px;
    display: -webkit-box;
    display: flex;
}

5.webpack的css提取成单独的文件

抽取了样式，就不能再用 style-loader 注入到 html 中了。
webpack4 开始使用： mini-css-extract-plugin插件, 1-3 的版本可以用：extract-text-webpack-plugin
webpack.config.js中的 mode 必须设置为 production，插件才有用；在开发阶段的话就用style-loader就可以了

安装npm install --save-dev mini-css-extract-plugin

在根目录下新建配置文件webpack.product.config.js，即开发阶段和生成最终dist版本用两个不同的配置文件

将webpack.config.js的内容粘贴进去
引入mini-css-extract-plugin
替换style-loader

更改mode

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',    //入口
    mode: 'production',
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // filename: devMode ? '[name].css' : '[name].[hash].css', //判断了是什么模式
            // chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
            
            filename: '[name].css', // 设置最终输出的文件名，与output中filename一样
            chunkFilename:'[id].css'
        })
    ]
}

npx webpack -h可以看webpack的帮助，可看到--configwebpack默认配置文件
终端执行npx webpack --config webpack.product.config.js（敲到webpack.p，按Tab可自动补全名称）
考虑到4的指令可能需要执行多次，可在package.json中添加，如果是npm run build，默认使用的配置文件仍然是webpack.config.js，npm run dist时才使用webpack.product.config.js配置文件
```
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack",
    "dist":"npx webpack --config webpack.product.config.js"
},
```
执行4后，可见dist中出现了一个main.css文件

如果plugins中，输出文件制定了哈希值，filename: '[name].[hash].css'，生成的main.css会变成mainxxxxxxxxxx.css，xxxxxxxxxx是这次打包的哈希值，是唯一标识符
想引用新生成的main.css，要在index.html文件中引用一下

6.webpack的css和js压缩插件使用

压缩CSS

webpack4压缩CSS需要安装插件

安装css插件optimize-css-assets-webpack-plugin
npm i -D optimize-css-assets-webpack-plugin

修改webpack.product.config.js配置文件

引入mini-css-extract-plugin

添加optimization

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: './src/index.js',    //入口
    mode: 'production',
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // filename: devMode ? '[name].css' : '[name].[hash].css', //判断了是什么模式
            // chunkFilename: devMode ? '[id].css' : '[id].[hash].css'

            filename: '[name].css', // 设置最终输出的文件名
            chunkFilename:'[id].css'
        })
    ],
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})]
    }
}

npm run dist,查看main.css，css代码都变成了一行，压缩成功

压缩JS

压缩js需要一个插件：uglifyjs-webpack-plugin, 此插件需要一个前提就是：mode: ‘production’

安装npm i -D uglifyjs-webpack-plugin

修改webpack.product.config.js配置文件

引入uglifyjs-webpack-plugin

在optimization的minimizer中引用插件

    optimization: {
    minimizer: [
        new OptimizeCSSAssetsPlugin({}),//压缩CSS
        new UglifyJsPlugin({            //压缩JS
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
    })]
}

npm run dist,此处出现错误
```
ERROR in main.js from UglifyJs Unexpected token: name «dom», expected: punc «;» [./src/index.js:6,0][main.js:17215,8]
```
是因为es6需要转成es5在给webpack打包，快速解决方法是把index.js中的let改成var，再次执行，查看main.js，代码被压缩了

7.解决文件名带哈希值的问题

为什么要让文件带上哈希值？

因为有时候在生产的时候会遇到缓存问题。如果是相同的css/js文件，虽然文件内容是更新了，但是由于浏览器的缓存问题，可能会出现问题，所以一般都会给css/js静态文件打上版本

方法

修改webpack.product.config.js文件

js文件输出:
filename: 'main.[hash].js', //最终打包后的文件名

css文件输出：

filename: '[name][hash].css', // 设置最终输出的文件名
chunkFilename: '[id][hash].css'

优化

由于每次打包生成的文件名都不一样，所以将js/css文件引入html中的文件也不一样
HtmlWebpackPlugin插件，可以把打包后的 CSS 或者 JS 文件引用直接注入到 HTML 模板中，这样就不用每次手动修改文件引用了。

安装
npm install --save-dev html-webpack-plugin

修改webpack.product.config.js配置文件中的引入及plugins，从而引用插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: './src/index.js',    //入口
    mode: 'production',
    output: {                   //输出
        filename: 'main.[hash].js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][hash].css', // 设置最终输出的文件名
            chunkFilename: '[id][hash].css'
        }),
        new HtmlWebpackPlugin({
            title: '学习webpack4.0 demo', // 默认值：Webpack App
            filename: 'main.html', // 最终生成的dist中的文件的名字，默认值： 'index.html'文件名
            template: path.resolve(__dirname, 'src/main.html'),//这里可以给它加模版文件，可以是index.html，也可以指定具体文件
            minify: {
                collapseWhitespace: true,   //是否去掉空格
                removeComments: true,       //是否移除注释
                removeAttributeQuotes: true // 移除属性的引号
            }
        })

    ],
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),//压缩CSS
            new UglifyJsPlugin({            //压缩JS
            cache: true,
            parallel: true,
            sourceMap: true // set to true if you want JS source maps
            })
        ]
    }
}

设置模版文件：

假设在src目录下新建一个main.html

修改main.html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="demo">我是模版文件自带的内容</div>
</body>
</html>

执行npm run dist，查看效果，可见dist中生成了main.html文件，且引入了css和js文件

8.清理dist目录插件clean-webpack-plugin应用

每次构建，我们的 /dist 文件夹都会保存生成的文件，然后就会非常杂乱。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法
clean-webpack-plugin 是一个比较普及的管理插件。

安装
npm install clean-webpack-plugin --save-dev

修改webpack.config.js/webpack.product.config.js

const path = require('path');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: {
    app: './src/index.js',
    print: './src/print.js'
    },
    plugins: [
+ new CleanWebpackPlugin(['dist'])  //想清理其他目录也可以修改名字
    ],
    output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
    }
};

执行npm run dist，查看效果。
- 此处发现产生报错，因为新版本的CleanWebpackPlugin用法变了，详见https://blog.csdn.net/qq_36242361/article/details/90709258

9.图片处理及优化

在src文件夹下新建assets文件夹，assets内新建img文件夹，img内放置几张照片

在a.scss中添加background一行

$bgcolor:red;

.box{
    background-color: $bgcolor;
    font-size: 30px;
    display: flex;
    background: url('../assets/img/01.jpg')
}

打包时解析sass模块的时候，会认为background这里引入的是一个新的模块，这个模块的文件名是jpg，默认处理不了，会报错

ERROR in ./src/assets/img/01.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

file-loader处理文件的导入

安装
npm install --save-dev file-loader

修改配置文件webpack.product.config.js，注意添加的位置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: './src/index.js',    //入口
    mode: 'production',
    output: {                   //输出
        filename: 'main.[hash].js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][hash].css', // 设置最终输出的文件名
            chunkFilename: '[id][hash].css'
        }),
        new HtmlWebpackPlugin({
            title: '学习webpack4.0 demo', // 默认值：Webpack App
            filename: 'main.html', // 最终生成的dist中的文件的名字，默认值： 'index.html'文件名
            template: path.resolve(__dirname, 'src/main.html'),//这里可以给它加模版文件，可以是index.html，也可以指定具体文件
            minify: {
                collapseWhitespace: true,   //是否去掉空格
                removeComments: true,       //是否移除注释
                removeAttributeQuotes: true // 移除属性的引号
            }
        }),
        new CleanWebpackPlugin()

    ],
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),//压缩CSS
            new UglifyJsPlugin({            //压缩JS
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            })
        ]
    }
}

修改一下src下的main.js，添加一个使用.box的div
执行npm run dist，可见dist中生成了一个图片文件

优化图片，使用image-webpack-loader可以帮助我们对图片进行压缩和优化。

安装
npm install image-webpack-loader --save-dev

修改webpack.product.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: './src/index.js',    //入口
    mode: 'production',
    output: {                   //输出
        filename: 'main.[hash].js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则

            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
                use: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    },

                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][hash].css', // 设置最终输出的文件名
            chunkFilename: '[id][hash].css'
        }),
        new HtmlWebpackPlugin({
            title: '学习webpack4.0 demo', // 默认值：Webpack App
            filename: 'main.html', // 最终生成的dist中的文件的名字，默认值： 'index.html'文件名
            template: path.resolve(__dirname, 'src/main.html'),//这里可以给它加模版文件，可以是index.html，也可以指定具体文件
            minify: {
                collapseWhitespace: true,   //是否去掉空格
                removeComments: true,       //是否移除注释
                removeAttributeQuotes: true // 移除属性的引号
            }
        }),
        new CleanWebpackPlugin()

    ],
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),//压缩CSS
            new UglifyJsPlugin({            //压缩JS
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            })
        ]
    }
}

npm run dist

10.图片base64优化和字体处理

url-loader功能类似于 file-loader，可以把 url 地址对应的文件，打包成 base64 的 DataURL，减少图片请求，提高访问的效率。
处理的图片不能太大

安装
npm install --save-dev url-loader

修改配置文件，安装成功后，就不需要用file-loader了，改用url-loader,将use里的'file-loader'用一个对象取代

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: './src/index.js',    //入口
    mode: 'production',
    output: {                   //输出
        filename: 'main.[hash].js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit:90000 //设置大小多少以内的图片，引用是要转化为base64的链接
                        }
                    }
                    
                ]
            },
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][hash].css', // 设置最终输出的文件名
            chunkFilename: '[id][hash].css'
        }),
        new HtmlWebpackPlugin({
            title: '学习webpack4.0 demo', // 默认值：Webpack App
            filename: 'main.html', // 最终生成的dist中的文件的名字，默认值： 'index.html'文件名
            template: path.resolve(__dirname, 'src/main.html'),//这里可以给它加模版文件，可以是index.html，也可以指定具体文件
            minify: {
                collapseWhitespace: true,   //是否去掉空格
                removeComments: true,       //是否移除注释
                removeAttributeQuotes: true // 移除属性的引号
            }
        }),
        new CleanWebpackPlugin()

    ],
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),//压缩CSS
            new UglifyJsPlugin({            //压缩JS
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            })
        ]
    }
}

这里本来应该加上'image-webpack-loader'的配置的，但是因为频繁报错，就先删掉了。
排查过发现可能是'image-webpack-loader'原来的配置和url-loader一起用后有冲突，在学第11的时候基本把问题解决了，详见下一节的第六步

11.webpack的配置合并、提前公共配置

开发阶段与生产阶段所需配置不完全相同，如果想把公共配置提到一起，需要工具帮忙。
webpack-merge的工具可以实现两个配置文件的合并，这样我们可以把开发环境和生产环境的公共配置抽取到一个公共的配置文件中。

安装
npm install --save-dev webpack-merge
改造配置文件
- webpack.dev.js
- webpack.product.js/webpack.prod.js
- webpack.common.js

将product的配置文件都拷贝到common里，修改webpack.common.js，留下开发阶段和生产阶段的公共部分

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 90000 //设置大小多少以内的图片，引用是要转化为base64的链接
                        }

                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '学习webpack4.0 demo', // 默认值：Webpack App
            filename: 'main.html', // 最终生成的dist中的文件的名字，默认值： 'index.html'文件名
            template: path.resolve(__dirname, 'src/main.html'),//这里可以给它加模版文件，可以是index.html，也可以指定具体文件
            minify: {
                collapseWhitespace: true,   //是否去掉空格
                removeComments: true,       //是否移除注释
                removeAttributeQuotes: true // 移除属性的引号
            }
        }),
        new CleanWebpackPlugin()
    ]
}

修改webpack.dev.js，留下独有部分，适当改写

const path = require('path');   //引用path模块
const merge = require('webpack-merge');
const common=require('./webpack.common');

//对外导出一个对象
let devConfig = {
    mode: 'development',        //代表我们现在是开发阶段
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    }
}

module.exports = merge(common,devConfig);

修改package.json中的script，修改默认执行的配置文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --config webpack.dev.js",
    "dist": "npx webpack --config webpack.prod.js"
},

npm run build，有报错，后来不断尝试发现，是'image-webpack-loader'原来的配置中的webp未能正常把图片进行转换

报错内容

ERROR in ./src/assets/img/01.jpg
Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: CoCreateInstance(MAKE_REFGUID(CLSID_WICImagingFactory), NULL, CLSCTX_INPROC_SERVER, MAKE_REFGUID(IID_IWICImagingFactory), (LPVOID*)&factory) failed 80040154
Couldn't access Windows Imaging Component (are you running Windows XP SP3 or newer?). Most formats not available. Use -s for the available YUV input.
Decoding of input data failed.
Status: 3(BITSTREAM_ERROR)
Error! Could not process file C:\Users\ADMINI~1\AppData\Local\Temp\89c3cc73-dbc6-49f7-8b9d-c0d0b66c8aad
Error! Cannot read input picture file 'C:\Users\ADMINI~1\AppData\Local\Temp\89c3cc73-dbc6-49f7-8b9d-c0d0b66c8aad'

解决方法：修改webpack.common.js，将'image-webpack-loader'原来的配置中的webp删除
参考：https://www.npmjs.com/package/image-webpack-loader
若仍想将图片转换成webp格式，可以试试https://stackoverflow.com/questions/53483962/webpack-encore-convert-images-to-webp-using-image-webpack-loader

修改webpack.prod.js，留下独有部分，适当改写

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const merge = require('webpack-merge');
const common = require('./webpack.common');

let prodConfig = {
    mode: 'production',
    output: {                   //输出
        filename: 'main.[hash].js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][hash].css', // 设置最终输出的文件名
            chunkFilename: '[id][hash].css'
        })
    ],
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),//压缩CSS
            new UglifyJsPlugin({            //压缩JS
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            })
        ]
    }
}
module.exports = merge(common, prodConfig);

npm run dist

12.webpack的启动监控自动编译和启用js的sourcemap

启用js的sourcemap

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。
webpack4可以直接使用 inline-source-map 选项，这有助于解释说明 js 原始出错的位置。（不要用于生产环境）

webpack.dev.js中加上一行

const path = require('path');   //引用path模块
const merge = require('webpack-merge');
const common = require('./webpack.common');

//对外导出一个对象
let devConfig = {
    mode: 'development',        //代表我们现在是开发阶段
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
+   devtool: 'inline-source-map',
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    }
}

module.exports = merge(common,devConfig);

在index.js中随便输出一点东西console.log(123);
npm run build，查看控制台
- 在未使用inline-source-map时，输出的123指向的是index.js:21(打包后index.js头部增加了一些代码)
- 使用inline-source-map后，输出的123指向的是index.js:14

监控文件变化，自动编译，使用观察模式

每次修改完毕后，都手动编译非常麻烦，最简单解决的办法就是启动watch。
npx webpack --watch

可修改package.json

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack --config webpack.dev.js",
"watch":"npx webpack --watch --config webpack.dev.js",
"dist": "npx webpack --config webpack.prod.js"
},

npm run watch
ctrl+c可以停止

但是有个bug，就是每次我们修改 js 或者 css 文件后，要看到修改后的 html 的变化，可能需要我自己重新刷新页面。
如何能不刷新页面，自动更新变化呢？，详见下一节

13.webpack的启动热更新和代理配置

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
webpack-dev-server编译速度快，编译到内存里，不写在dist中。

安装
npm install --save-dev webpack-dev-server

修改开发阶段的配置文件,简单配置

const path = require('path');   //引用path模块
const merge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack');

//对外导出一个对象
let devConfig = {
    mode: 'development',        //代表我们现在是开发阶段
    output: {                   //输出
        filename: 'main.js',    //最终打包后的文件名
        path: path.resolve(__dirname, 'dist')//最终main.js在哪个文件夹下
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        open: true
    },
    module: {
        rules: [                //模块处理规则
            {
                test: /\.(sc|c|sa)ss$/,
                //当引入的模块的后缀满足这个，就使用use的loader处理
                use: [//处理顺序从后向前
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader => [
                                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),  // 更容易查看(patch)的依赖
        new webpack.HotModuleReplacementPlugin()  // 替换插件

    ]
}

module.exports = merge(common, devConfig);

启动此webserver可用
webpack-dev-server --open

官网其他配置，也可以用这些配置

devServer: {
    clientLogLevel: 'warning', // 可能的值有 none, error, warning 或者 info（默认值)
    hot: true,  // 启用 webpack 的模块热替换特性, 这个需要配合： webpack.HotModuleReplacementPlugin插件
    contentBase:  path.join(__dirname, "dist"), // 告诉服务器从哪里提供内容， 默认情况下，将使用当前工作目录作为提供内容的目录
    compress: true, // 一切服务都启用gzip 压缩
    host: '0.0.0.0', // 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问 0.0.0.0
    port: 8080, // 端口
    open: true, // 是否打开浏览器
    overlay: {  // 出现错误或者警告的时候，是否覆盖页面线上错误消息。
        warnings: true,
        errors: true
    },
    publicPath: '/', // 此路径下的打包文件可在浏览器中访问。
    proxy: {  // 设置代理
        "/api": {  // 访问api开头的请求，会跳转到  下面的target配置
        target: "http://192.168.0.102:8080",
        pathRewrite: {"^/api" : "/mockjsdata/5/api"}
        }
    },
    quiet: true, // necessary for FriendlyErrorsPlugin. 启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
    watchOptions: { // 监视文件相关的控制选项
        poll: true,   // webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下，不会正常工作。例如，当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下，请使用轮询. poll: true。当然 poll也可以设置成毫秒数，比如：  poll: 1000
        ignored: /node_modules/, // 忽略监控的文件夹，正则
        aggregateTimeout: 300 // 默认值，当第一个文件更改，会在重新构建前增加延迟
    }
}

此处，用npx webpack-dev-server --config webpack.dev.js，然后在路由上添加/main.html
然后不管修改js还是其他，都会自动更新，然后会发现dist文件夹里没有文件，所以说明它编译是在内存里面生成的。

将命令加到package.json中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --config webpack.dev.js",
    "watch": "npx webpack --watch --config webpack.dev.js",
    "start": "npx webpack-dev-server --config webpack.dev.js",
    "dist": "npx webpack --config webpack.prod.js"
},

使用代理部分此处省略，具体请看第14个视频。会用到axios发起Ajax请求。

14.webpack的代理服务器设置和babel转换及优化

babel转码

虽然现代的浏览器已经兼容了96%以上的ES6的语法了，但是为了兼容老式的浏览器（IE8、9）我们需要把最新的ES6的语法转成ES5的，那么babel的loader就出场了。

安装
npm i -D babel-loader babel-core babel-preset-env

在webpack的配置文件中，添加js的处理模块。（开发阶段和生成阶段都需要，因此加到common里）

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,  // 加快编译速度，不包含node_modules文件夹内容
            use: {
                loader: 'babel-loader'
            }
        }
    ]
}

在项目根目录下，添加babel的配置文件.babelrc，其内容为
```
{
    "presets": ["env"]
}
```

将原本的var改成let压缩JS，此时打包不会再报错；或者在index.js里添加一些ES6语法的内容

class Temp {
    show() {
        console.log('this.Age :', this.Age);
    }
    get Age() {
        return this._age;
    }
    set Age(val) {
        this._age = val + 1;
    }
}
let t = new Temp();
t.Age = 19;
t.show();

npm run build

查看生成的main.js，发现原来的let已被替换成var
此处可能会产生报错，报错原因是找不到@babel/core，解决方法详见https://www.cnblogs.com/soyxiaobi/p/9554565.html

babel优化

babel-loader可以配置如下几个options：
- cacheDirectory：默认值为 false。当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。如果设置了一个空值 (loader: ‘babel-loader?cacheDirectory’) 或者 true (loader: babel-loader?cacheDirectory=true)，loader 将使用默认的缓存目录 node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录。（使用跟这个可以提升编译速度）
- cacheIdentifier：默认是一个由 babel-core 版本号，babel-loader 版本号，.babelrc 文件内容（存在的情况下），环境变量 BABEL_ENV 的值（没有时降级到 NODE_ENV）组成的字符串。可以设置为一个自定义的值，在 identifier 改变后，强制缓存失效。
- forceEnv：默认将解析 BABEL_ENV 然后是 NODE_ENV。允许你在 loader 级别上覆盖 BABEL_ENV/NODE_ENV。对有不同 babel 配置的，客户端和服务端同构应用非常有用。
注意：sourceMap 选项是被忽略的。当 webpack 配置了 sourceMap 时（通过 devtool 配置选项），将会自动生成 sourceMap。

babel 在每个文件都插入了辅助代码，使代码体积过大.babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。你可以引入 babel runtime 作为一个独立模块，来避免重复引入。

安装

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

配置

rules: [
// 'transform-runtime' 插件告诉 babel 要引用 runtime 来代替注入。
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
        loader: 'babel-loader',
        }
    }
]

修改.babelrc

{
    "presets": ["env"],
    "plugins": [
        ["transform-runtime", {
        "helpers": true,
        "polyfill": true,
        "regenerator": true,
        "moduleName": "babel-runtime"
        }]
    ]
}

此时，webpack打包的时候，会自动优化重复引入公共方法的问题。

15.webpack的eslint校验配置

ESLint校验代码格式规范

安装

npm install eslint --save-dev
npm install eslint-loader --save-dev

# 以下是用到的额外的需要安装的eslint的解释器、校验规则等
npm i -D babel-eslint standard

在webpack.common.js中配置，把ESLint的配置放到处理js文件的最后

rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,  // 加快编译速度，不包含node_modules文件夹内容
            use: [{
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true
                }
            }, {
                loader: "eslint-loader",
                options: {
                    // eslint options (if necessary)
                    fix: true
                }
            }]
        },

eslint配置可以直接放到webpack的配置文件中，也可以直接放到项目根目录的 .eslintrc中(文档)。

也可以将eslint配置文件创建为.eslintrc.js

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
    parser: 'babel-eslint'
},
env: {
    browser: true
},
extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
],
globals: {
    NODE_ENV: false
},
rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 添加，分号必须
    semi: ['error', 'always'],
    'no-unexpected-multiline': 'off',
    'space-before-function-paren': ['error', 'never'],
    // 'quotes': ["error", "double", { "avoidEscape": true }]
    quotes: [
    'error',
    'single',
    {
        avoidEscape: true
    }
    ]
}
};

最好在根目录下再加一个.eslintignore文件，去忽略一些文件
```
/dist/
/node_modules/
/*.js
```
- 这样vscode的eslint插件就不会报错了
然后在src的index.js文件中多添加一些分号，npm run build之后查看生成的main.js文件，发现自动修复了

16.webpack的模块解析后缀和别名配置详解

创建 import 或 require 的别名，来确保模块引入变得更简单。
自动解析确定的扩展。

17.webpack的模块的外部依赖配置

把一个模块做成外部依赖，最终不会打包到js文件中去

18.webpack的打包分析报表插件与优化总结

以上三课本文不作详细阐释，有兴趣可查看视频或查看于文章开头的链接查看相关笔记

你可能感兴趣的:(学习汇总)

【AI Infra】基础学习汇总篇逆羽飘扬 AI基础知识人工智能学习
系列综述：目的：本系列是个人整理为了学习训练框架优化的，整理期间苛求每个知识点，平衡理解简易度与深入程度。来源：材料主要源于【DeepEP官方介绍】进行的，每个知识点的修正和深入主要参考各平台大佬的文章，其中也可能含有少量的个人实验自证。结语：如果有帮到你的地方，就点个赞和关注一下呗，谢谢！！！请先收藏！！！，后续继续完善和扩充(●’◡’●)文章目录一、分布式与并行基础分布式计算高性能并行GPU硬
超子物联网HAL库笔记：准备篇 L_Z_J_I 学习HAL库物联网笔记嵌入式
超子物联网HAL库学习汇总入口：超子物联网HAL库笔记：[汇总]写作不易，如果您觉得写的不错，欢迎给博主来一波点赞、收藏~让博主更有动力吧！1.HAL库简介HAL库HAL库（HardwareAbstractionLayer）是STMicroelectronics提供的STM32微控制器的硬件抽象层库。它通过一套统一的API接口，简化了对STM32外设的配置和操作，使开发者能够更快速地进行嵌入式系统
超子物联网HAL库笔记：多指针定位+循环收发缓冲区方案设计 L_Z_J_I 学习HAL库笔记
子页面开头超子物联网HAL库学习汇总入口：超子物联网HAL库笔记：[汇总]写作不易，如果您觉得写的不错，欢迎给博主来一波点赞、收藏~让博主更有动力吧！一、多指针定位+循环收发缓冲区方案设计1.介绍轮询阻塞的方式效率不高，一般会使用中断或者DMA方式收发数据这时就需要定义一个缓冲区，这里暂定为2048字节。缓冲区为一个、一维数组，循环使用，要注意缓冲区不要出现回卷覆盖，接收的数据要及时处理。2.大致
转onnx模型学习汇总及TensorRT部署天亮换季人工智能自动驾驶持续部署 pytorch 算法深度学习 python
文章目录一写在前面二学习过程三模型转换（三种算法均开源）1.MatrixVT转onnx和TensorRT2.BEVPoolV2转onnx和TensorRT3.BEVDepth转模型四总结一写在前面深度学习火起来已近十年，于当下的算法岗位而言，多数都在基于深度学习方式或者深度学习相关方法做研发，但算法研发发展至今，对研发人员的要求绝不会限于公开数据集的使用、开源模型的训练、网络模块的堆加等，需要
Redis学习笔记（一）--Redis简介 Scr1Pt0908 Redis学习笔记 redis 学习笔记分布式数据库缓存
文章目录一、NoSQL1、键值存储数据库2、列存储数据库3、文档型数据库4、图形(Graph)数据库二、Redis用途三、Redis特性四、Redis的IO模型1、单线程模型2、混合线程模型3、多线程模型4、优缺点总结1.单线程模型2.多线程模型本文参考：Redis学习汇总（已完结）Redis超详细入门教程（基础篇）Redis视频从入门到高级，redis视频教程详解，Redis一课在手，别无所求黑
Java基础学习汇总大鱼等于负 java-基础语法 java
Java基础学习汇总java语言基础java函数和数组java面向对象java异常整理用，早就停更。。。写作不易，如果您觉得写的不错，欢迎给博主点赞、收藏、评论、收藏来一波~让博主更有动力吧！路漫漫其修远兮，吾必将上下求索~
跟着大佬搬砖--- vue 组件拖拽缩放 Webgiserin JS vue vue.js javascript
vue-drag-resize地址vue-draggable-resizable-gorkys地址案例案例学习汇总特有参考价值的GridLayout在线地址官网地址参考案例
C#学习汇总林祖师 C#c#学习开发语言
C#学习汇总1.C#编程基础C#语法C#使用变量2.控制程序流程和转换类型C#控制台应用程序C#选择语句和迭代语句C#类型转换3.编写函数C#编写函数4.使用面向对象C#构建类库C#在字段中存储数据C#写入和调用方法C#使用属性和索引器控制访问5.实现接口和继承类C#接口和泛型C#学习继承6.使用常见的.NET类型C#常见的.Net类型（一）C#常见的.Net类型（二）7.处理文件、流C#处理文件
Go 错误处理总结与实践 pseudoyu
前言最近在对极客时间毛剑老师的Go进阶训练营进行重温和学习汇总，这是一门比较偏向于工程化以及原理层面的的课程，涵盖的知识点非常多，因此决定开一个系列来进行记录，也便于自己总结查阅。这是系列第一篇《Go错误处理》。Go错误处理机制Go内置errorsGo语言中的error就是普通的一个接口，表示值//http://golang.org/pkg/builtin/#error//error接口的定义ty
图元装配和光栅化真像大白阿 Unity3d 几何学算法图元装配 Shader流水线
OpenGLES3.0学习汇总OpenGLES3.0学习记录汇总目录本文主要介绍：OpenGLES支持的图元和几何形状对象的类型，以及它们的绘制方法。OpenGLES图形管线顶点着色器之后的图元装配阶段。OpenGLES图形管线的光栅化阶段。图元图元可以用glDrawArrays、glDrawElements、glDrawRangeElements、glDrawArraysInstanced、gl
1899_野火FreeRTOS教程阅读笔记_任务创建 grey_csdn FreeRTOS 笔记 java 开发语言
1899_野火FreeRTOS教程阅读笔记_任务创建全部学习汇总：g_FreeRTOS:FreeRTOS学习笔记(gitee.com)关于这部分，从一般前后台程序到RTOS的任务描述了很多。但是我觉得这本书的这部分描述没有描述到关键的信息点。其实，RTOS存在的一个主要的目的就是让各个Task从Task自己的层面能够有一种感觉：Task自己独占了整个CPU。而Task本身是没法独占全部CPU的，我
1898_野火FreeRTOS教程阅读笔记_链表操作 grey_csdn FreeRTOS 笔记链表数据结构
1898_野火FreeRTOS教程阅读笔记_链表操作全部学习汇总：g_FreeRTOS:FreeRTOS学习笔记(gitee.com)新的节点的插入，影响到的是链表中最后一个元素的后继以及当前被插入元素的前驱、后继以及归属属性。具体的操作效果为：新的节点更新自己的前驱和后继，而对等的关联信息则是当前pxIndex所指向的前驱和链表的尾结点。而链表的尾结点在初始化的时候，pxIndex存储的其实是指
1890_在WSL中使用emacs org-pomodoro的声音提示 grey_csdn emacs 编辑器
全部学习汇总：editors_skills:emacs，vim还有VSCode等编辑器技巧(gitee.com)在WSL中使用emacsorg-pomodoro的声音提示Grey尝试使用WSL播放wav文件其实WSL我也用了很多年了，但是主要的功能还是拿来跑跑脚本。很多交互式的环境启动的速度以及响应速度在这个平台上都会好很多。从我使用org-mode做笔记开始，我用到了org-download的功
第一期书生·浦语大模型实战营学习汇总 Czi. 学习
第一课：https://h90ag9106t.feishu.cn/docx/Dl6gdmiydohZp5x95RDc89rynnd第二课：https://h90ag9106t.feishu.cn/docx/QJFJd6z8ao57KHxkd7LcVsqpnZb第三课：https://h90ag9106t.feishu.cn/docx/OeyFdw1ZYosnC3xVia5csGkpnsg第四课：h
【大模型】书生·浦语大模型实战营课程学习汇总 weixin_43193528 学习人工智能 llama
学习汇总第一节课笔记第二节课笔记作业第三节课笔记作业第四节课笔记作业第五节课笔记作业第六节课笔记作业第一节课笔记【大模型】书生·浦语大模型实战营第一节-CSDN博客https://blog.csdn.net/weixin_43193528/article/details/135447026第二节课笔记【大模型】书生·浦语大模型实战营第二节-CSDN博客https://blog.csdn.net/w
笔记|组织行为学概述茕南_3fdf
前言：最近在学习中南财经政法大学王淑红教授的《组织行为学》课程，课程还算有趣，浅显易懂，不需要什么专业知识，都是些基本概念、框架和案例应用，作为小白学习的课程来说很具有科普意义，以此篇推送内容做一个学习汇总，有需要的可以转发收藏，理解再输出过程有错误的地方欢迎指正。图片发自App第一讲组织行为学概述，所涉概念如下：组织：是一种人们有目的地组合起来的社会单元，它由两个或多个个体组成，以实现一个共同目
一周学习汇总180826 澎波先生
文|澎波见龙为了加速转化速度，用于实战，今后每一周都会找一天来将一周所学的进行汇总和拆解。这是第九周。一、我读的书这周完成一本书的阅读，就是念远怀人的《三十六骑》。是的，我又反水了，本来计划这周是读《影响力》的，但发现书不见了，只有kindle版，电子书携带方便，但有个问题就是：难以做笔记。恰好身边有小荐荐寄来的《三十六骑》，而且也是有任务的，那就连同小叶读书营的功课一起做了呗。跟以往一样，每天阅
学习Https加密过程笔记 Melofree https
学习Https加密过程笔记前言Url请求流程图对于Https中的一些疑问和理解过程描述（c为客户端,s为服务端）前言针对网上很多这方面的回答，虽然每个都有可取之处，但总感觉缺了什么。于是自己学习汇总了一些知识点，在这分享给大家。Url请求流程图首先放一张网上找的感觉还算全的流程图。对于Https中的一些疑问和理解1.为什么不用对称加密原因：对称加密在客户端和服务器交流过程中会被第三者劫持而失去安全
GSEQ行为序列分析软件学习汇总疋瓞科研笔记学习
0、问题描述：1、GSEQ软件是做什么的？2、GSEQ软件如何使用？2、GSEQ软件前期需要在“记事本”中编写“程式码”需要将所有行为数据编码之后，将编码行为序列粘贴到GSEQ软件中去，如果数据量很大，这个过程就非常繁杂了，是否可以简化这个数据处理流程？1、GSEQ软件介绍：GSEQ是一款交互序列分析软件，通过这款软件，我们可以将编码之后的交互行为之间的关系，通过力导向图绘制出来，这样就可以知道每
Unity Shader - Ray Marching Study Summary - 学习汇总 Jave.Lin Raymarching RayMarching 光线步进 Ray Marching
自学记录用RayMarching字面意思就是：光线步进。详细一些的说明：屏幕中每个像素放射一条射线，作为光路逆向追踪，将光线所按照特定的步长来前进（步进），直到碰撞到SDFs函数几何体（SDFs是：(SignedDistanceFields的简写)），或是超出指定的最远距离，就停止步进。根据碰撞后的几何体表面，得到世界坐标，计算出法线、等信息来做光照运算。上面说的光路逆向追踪，因为通常是我们相机或
1872_S32K344 MCU基本信息了解 grey_csdn S32K 单片机网络嵌入式硬件
全部学习汇总：GreyZhang/g_s32k344:AnewMCUlearningnotes.IwouldtrytouseMCALinsteadofSDK.(github.com)以下的摘录信息来自：S32KAutoGeneral-PurposeMCUs|NXPSemiconductors安全等级可以到ASILD。M7的内核，主频可以到160M，而且支持锁步。通信上看起来支持以太网，并且有加密的
STM32cubeIDE学习汇总（七）----单/多通道ADC读取电压辽G.默语 STM32cubeIDE arm 单片机 stm32 嵌入式硬件
目录什么是ADC概念3个ADC控制器ADC的转换模式：模式讲解工作框图ADC时钟中断ADC的主要特征ADC配置ADC单通道采样使用连续采样模式打印电压值中断方式读取电压值DMA方式读取电压值ADCDMA方式多通道采样三通道，查询阻塞模式什么是ADC概念Analog-to-DigitalConverter的缩写。指模/数转换器或者模拟/数字转换器。是指将连续变量的模拟信号转换为离散的数字信号的器件。
unity控制摄像机几种视角实现方式极致人生-010 c#unity
目录1、按下鼠标右键可以实现摄像机上下左右旋转2、自由视角3、摄像头跟随视角4、跟随自由视角5、第一人称跟随视角python学习汇总连接：1、按下鼠标右键可以实现摄像机上下左右旋转这段代码定义了一个名为CameraRotate的脚本，用于控制摄像机根据鼠标右键（中键）的移动进行旋转。摄像机将以一定的旋转速度（rotationSpeed）跟随鼠标输入，并且其垂直旋转角度将被限制在最小垂直角度（min
知识学习汇总在摘棉花
1测试理论1.1软件的分类1.1.1软件的定义一系列按照特定顺序组织的计算机数据和指令的集合。软件=数据+指令+文档问题：常见软件有哪...2测试计划2.1测试计划介绍2.1.1定义制定测试目的、范围、方法、时间进度及软件测试重点的过程2.2测试计划模板内容测试目的、测试资源、测...3测试用例设计方法用例核心要素（16个）必须掌握：用例编号(如何命名)、所属模块、用例标题（验证谁在什么情况下，去
机器学习-数学学习汇总 zylhuo AI之路 AI机器学习-微积分 AI-数学
***I数学只是一个工具，会使用，能解决问题就可以了，精确例如到3.14够用就可以了***微积分作用：解决非线性问题学习：27分。高中数学：1.高中数学所有知识点表格总结，高中知识点一个不漏！推荐收藏-知乎2.高中数学视频https://www.bilibili.com/video/BV147411K7xu/?spm_id_from=333.337.search-card.all.click&vd
一周学习汇总180812 澎波先生
文|澎波见龙为了加速转化速度，用于实战，今后每一周都会找一天来将一周所学的进行汇总和拆解。这是第七周。一、我读的书这周完成一本书的阅读，就是威廉·萨默塞特·毛姆的名著《月亮与六便士》。因为参加了小叶读书营，所以一本不厚的书，我读了一周，每天都写一篇读书笔记【参见《我理解的〈月亮与六便士〉（1）（2）（3）（4）（5）（6）】，还会有一篇书评。二、正在或即将阅读的内容准备阅读参加读书营时挑的《影响力
运营是个啥？庸自扰
书中写，运营是个筐，什么都能够往里装。互联网运营基本分为三个部分。第一，内容；第二，用户；第三，则是活动。反观我最近在工作中接触到的东西，上述三者都有，只是之前没有这样清晰的认知。我现在的工作就是学习汇总各种基础数据，书中写无论做什么用心则会有收获。以前会有这样的想法，在实习期间老板也常告诉我们，做数据并不是统计出来就完事了，一般人都只会做到这一步。如果还想有所进步，就得学会从数据背后看出端倪，通
06 - 线索化二叉树和哈夫曼树 iOS之文一
数据结构和算法学习汇总线索化二叉树的认识空链域的出现对于具有n个节点的二叉树，采用链式存储结构时，每个节点有两个指针域，总共有2n个指针域同时又由于只有n-1个节点被有效指针所指向（只有根节点没有被指向）所以共有2n-(n-1)=n+1个空链域空链域.png线索：我们知道遍历二叉树的结果是一个节点的线性序列，所以可以利用上面的空链域来存储指向节点的前驱节点和后继节点，这样的指向该线性序列中的前驱节
511_spacemacs跳转到任意2字符的位置 grey_csdn Emacs Lisp
全部学习汇总：https://github.com/GreyZhang/editors_skills之前，在spacemacs的配置中找到了一个非常好用的功能：跳转到屏幕上的任意字符。具体的效果如下：这是我在配置文件中尝试跳转到字符a，但是，这个功能有时候会有一个问题，也就是这里遇到的问题：候选项太多，目标选择也有点麻烦。其实我自己本来的意图是想跳转到294行的lkd的位置。后来，我在使用陈斌的配
1843_emacs中两个插件use-package以及org-bullets的使用 grey_csdn editor emacs 编辑器
Grey1843_emacs中两个插件use-package以及org-bullets的使用全部学习汇总：GitHub-GreyZhang/editors_skills:SummaryforsomecommoneditorskillsIused.我个人的emacs的配置以及两个插件的使用由来我自己现在也开始维护一个我自己的emacs配置，总觉得这样的造轮子不仅仅是一个学习的过程，其实也能够让工具更
SAX解析xml文件小猪猪08 xml
1.创建SAXParserFactory实例 2.通过SAXParserFactory对象获取SAXParser实例 3.创建一个类SAXParserHander继续DefaultHandler，并且实例化这个类 4.SAXParser实例的parse来获取文件 public static void main(String[] args) { //
为什么mysql里的ibdata1文件不断的增长？ brotherlamp linux linux运维 linux资料 linux视频 linux运维自学
我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题。当监控服务器发送一个关于 MySQL 服务器存储的报警时，恐慌就开始了 —— 就是说磁盘快要满了。一番调查后你意识到大多数地盘空间被 InnoDB 的共享表空间 ibdata1 使用。而你已经启用了 innodbfileper_table，所以问题是： ibdata1存了什么？当你启用了 i
Quartz-quartz.properties配置 eksliang quartz
其实Quartz JAR文件的org.quartz包下就包含了一个quartz.properties属性配置文件并提供了默认设置。如果需要调整默认配置，可以在类路径下建立一个新的quartz.properties，它将自动被Quartz加载并覆盖默认的设置。下面是这些默认值的解释 #-----集群的配置 org.quartz.scheduler.instanceName =
informatica session的使用 18289753290 workflow session log Informatica
如果希望workflow存储最近20次的log，在session里的Config Object设置，log options做配置，save session log :sessions run ;savesessio log for these runs:20 session下面的source 里面有个tracing
Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误酷的飞上天空 scrapy
Scrapy版本0.14.4 出现问题现象： ERROR: Error downloading <GET http://xxxxx CRC check failed 解决方法 1.设置网络请求时的header中的属性'Accept-Encoding': '*;q=0' 明确表示不支持任何形式的压缩格式，避免程序的解压
java Swing小集锦永夜-极光 java swing
1.关闭窗体弹出确认对话框 1.1 this.setDefaultCloseOperation (JFrame.DO_NOTHING_ON_CLOSE); 1.2 this.addWindowListener ( new WindowAdapter () { public void windo
强制删除.svn文件夹随便小屋 java
在windows上，从别处复制的项目中可能带有.svn文件夹，手动删除太麻烦，并且每个文件夹下都有。所以写了个程序进行删除。因为.svn文件夹在windows上是只读的，所以用File中的delete()和deleteOnExist()方法都不能将其删除，所以只能采用windows命令方式进行删除
GET和POST有什么区别？及为什么网上的多数答案都是错的。 aijuans get post
如果有人问你，GET和POST，有什么区别？你会如何回答？我的经历前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把G
谈谈新浪微博背后的那些算法 aoyouzi 谈谈新浪微博背后的那些算法
本文对微博中常见的问题的对应算法进行了简单的介绍，在实际应用中的算法比介绍的要复杂的多。当然，本文覆盖的主题并不全，比如好友推荐、热点跟踪等就没有涉及到。但古人云“窥一斑而见全豹”，希望本文的介绍能帮助大家更好的理解微博这样的社交网络应用。微博是一个很多人都在用的社交应用。天天刷微博的人每天都会进行着这样几个操作：原创、转发、回复、阅读、关注、@等。其中，前四个是针对短博文，最后的关注和@则针
Connection reset 连接被重置的解决方法百合不是茶 java 字符流连接被重置
流是java的核心部分,,昨天在做android服务器连接服务器的时候出了问题,就将代码放到java中执行,结果还是一样连接被重置被重置的代码如下; 客户端代码; package 通信软件服务器; import java.io.BufferedWriter; import java.io.OutputStream; import java.io.O
web.xml配置详解之filter bijian1013 java web.xml filter
一.定义 <filter> <filter-name>encodingfilter</filter-name> <filter-class>com.my.app.EncodingFilter</filter-class> <init-param> <param-name>encoding<
Heritrix Bill_chen 多线程 xml 算法制造配置管理
作为纯Java语言开发的、功能强大的网络爬虫Heritrix，其功能极其强大，且扩展性良好，深受热爱搜索技术的盆友们的喜爱，但它配置较为复杂，且源码不好理解，最近又使劲看了下，结合自己的学习和理解，跟大家分享Heritrix的点点滴滴。 Heritrix的下载（http://sourceforge.net/projects/archive-crawler/）安装、配置，就不罗嗦了，可以自己找找资
【Zookeeper】FAQ bit1129 zookeeper
1.脱离IDE，运行简单的Java客户端程序 #ZkClient是简单的Zookeeper~$ java -cp "./:zookeeper-3.4.6.jar:./lib/*" ZKClient 1. Zookeeper是的Watcher回调是同步操作，需要添加异步处理的代码 2. 如果Zookeeper集群跨越多个机房，那么Leader/
The user specified as a definer ('aaa'@'localhost') does not exist 白糖_ localhost
今天遇到一个客户BUG，当前的jdbc连接用户是root，然后部分删除操作都会报下面这个错误：The user specified as a definer ('aaa'@'localhost') does not exist 最后找原因发现删除操作做了触发器，而触发器里面有这样一句 /*!50017 DEFINER = ''aaa@'localhost' */ 原来最初
javascript中showModelDialog刷新父页面 bozch JavaScript 刷新父页面 showModalDialog
在页面中使用showModalDialog打开模式子页面窗口的时候，如果想在子页面中操作父页面中的某个节点，可以通过如下的进行： window.showModalDialog('url',self,‘status...’); // 首先中间参数使用self 在子页面使用w
编程之美-买书折扣 bylijinnan 编程之美
import java.util.Arrays; public class BookDiscount { /**编程之美买书折扣书上的贪心算法的分析很有意思，我看了半天看不懂，结果作者说，贪心算法在这个问题上是不适用的。。下面用动态规划实现。哈利波特这本书一共有五卷，每卷都是8欧元，如果读者一次购买不同的两卷可扣除5%的折扣，三卷10%，四卷20%，五卷
关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要 chenbowen00 struts WEB安全
因为近期负责的几个银行系统软件，需要交付客户，因此客户专门请了安全公司对系统进行了安全评测，结果发现了诸如跨站执行脚本，远程执行漏洞以及弱口令等问题。下面记录下本次解决的过程以便后续 1、首先从最简单的开始处理，服务器的弱口令问题，首先根据安全工具提供的测试描述中发现应用服务器中存在一个匿名用户，默认是不需要密码的，经过分析发现服务器使用了FTP协议，而使用ftp协议默认会产生一个匿名用
[电力与暖气]煤炭燃烧与电力加温 comsci
在宇宙中,用贝塔射线观测地球某个部分,看上去,好像一个个马蜂窝,又像珊瑚礁一样,原来是某个国家的采煤区..... 不过,这个采煤区的煤炭看来是要用完了.....那么依赖将起燃烧并取暖的城市,在极度严寒的季节中...该怎么办呢? &nbs
oracle O7_DICTIONARY_ACCESSIBILITY参数 daizj oracle
O7_DICTIONARY_ACCESSIBILITY参数控制对数据字典的访问.设置为true,如果用户被授予了如select any table等any table权限,用户即使不是dba或sysdba用户也可以访问数据字典.在9i及以上版本默认为false,8i及以前版本默认为true.如果设置为true就可能会带来安全上的一些问题.这也就为什么O7_DICTIONARY_ACCESSIBIL
比较全面的MySQL优化参考 dengkane mysql
本文整理了一些MySQL的通用优化方法，做个简单的总结分享，旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作，至于具体的SQL优化，大部分通过加适当的索引即可达到效果，更复杂的就需要具体分析了，可以参考本站的一些优化案例或者联系我，下方有我的联系方式。这是上篇。 1、硬件层相关优化 1.1、CPU相关在服务器的BIOS设置中，可
C语言homework2，有一个逆序打印数字的小算法 dcj3sjt126com c
#h1# 0、完成课堂例子 1、将一个四位数逆序打印 1234 ==> 4321 实现方法一： # include <stdio.h> int main(void) { int i = 1234; int one = i%10; int two = i / 10 % 10; int three = i / 100 % 10;
apacheBench对网站进行压力测试 dcj3sjt126com apachebench
ab 的全称是 ApacheBench ，是 Apache 附带的一个小工具，专门用于 HTTP Server 的 benchmark testing ，可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。
2种办法让HashMap线程安全 flyfoxs java jdk jni
多线程之--2种办法让HashMap线程安全多线程之--synchronized 和reentrantlock的优缺点多线程之--2种JAVA乐观锁的比较( NonfairSync VS. FairSync) HashMap不是线程安全的,往往在写程序时需要通过一些方法来回避.其实JDK原生的提供了2种方法让HashMap支持线程安全.
Spring Security（04）——认证简介 234390216 Spring Security 认证过程
认证简介目录 1.1 认证过程 1.2 Web应用的认证过程 1.2.1 ExceptionTranslationFilter 1.2.2 在request之间共享SecurityContext 1
Java 位运算 Javahuhui java 位运算
// 左移( << ) 低位补0 // 0000 0000 0000 0000 0000 0000 0000 0110 然后左移2位后，低位补0： // 0000 0000 0000 0000 0000 0000 0001 1000 System.out.println(6 << 2);// 运行结果是24 // 右移( >> ) 高位补"
mysql免安装版配置 ldzyz007 mysql
1、my-small.ini是为了小型数据库而设计的。不应该把这个模型用于含有一些常用项目的数据库。 2、my-medium.ini是为中等规模的数据库而设计的。如果你正在企业中使用RHEL,可能会比这个操作系统的最小RAM需求(256MB)明显多得多的物理内存。由此可见，如果有那么多RAM内存可以使用，自然可以在同一台机器上运行其它服务。 3、my-large.ini是为专用于一个SQL数据
MFC和ado数据库使用时遇到的问题你不认识的休道人 sql C++mfc
=================================================================== 第一个 =================================================================== try{ CString sql; sql.Format("select * from p
表单重复提交Double Submits rensanning double
可能发生的场景： *多次点击提交按钮 *刷新页面 *点击浏览器回退按钮 *直接访问收藏夹中的地址 *重复发送HTTP请求（Ajax）（1）点击按钮后disable该按钮一会儿，这样能避免急躁的用户频繁点击按钮。这种方法确实有些粗暴，友好一点的可以把按钮的文字变一下做个提示，比如Bootstrap的做法： http://getbootstrap.co
Java String 十大常见问题 tomcat_oracle java 正则表达式
　1.字符串比较，使用“==”还是equals()? 　　"=="判断两个引用的是不是同一个内存地址(同一个物理对象)。　　equals()判断两个字符串的值是否相等。　　除非你想判断两个string引用是否同一个对象，否则应该总是使用equals()方法。　　如果你了解字符串的驻留(String Interning)则会更好地理解这个问题。　　
SpringMVC 登陆拦截器实现登陆控制 xp9802 springMVC
思路，先登陆后，将登陆信息存储在session中，然后通过拦截器，对系统中的页面和资源进行访问拦截，同时对于登陆本身相关的页面和资源不拦截。实现方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23