ps酷教程

webpack基础配置教程

文章目录

1.初识Webpack
2.开启项目
3.处理js和json文件
- webpack小试牛刀
- webpack打包js/json文件
- webpack默认不能处理css
4.webpack配置文件
5.打包less、css资源
- 1. 初始化npm包环境
- 2. 安装css-loader和styleLoader
- 3. webpack配置文件添加loader
- 4. 运行webpack打包
- 5. 处理less文件
6.打包html文件
- 1. 安装HtmlwebpackPlugin插件
- 2. 引入HtmlwebpackPlugin插件
- 3. 执行webpack命令
7.打包样式中的图片
- 1. 安装并配置file-loader
- 2. 样式中引入图片后，打包
- 3. 使用url-loader
8.打包html中的图片
- 1. 安装并配置html-loader
- 2. html文件添加img标签
- 3. 打包
9.打包其他资源
- 1. 引入ali字体文件
- 2. 配置file-loader
- 3. 打包
10.devServer
- 1. 安装webpack-dev-server
- 2. webpack.config.js中配置devServer
- 3. 使用webpack-dev-server命令启动
11. 生产环境准备:
- 配置script命令
- 1.提取css为单独文件
- - 1. 安装 MiniCssExtractPlugin
  - 2. 配置MiniCssExtractPlugin.loader
  - 3. 打包
- 2.css兼容性处理
- - 1. 安装 postcss相关loader
  - 2.package.json添加browserslist
  - 3. 配置webpack.prod.js
  - 4. 打包
- 3. js语法检查
- 4.js语法转换
- 5.js兼容性处理
- 6.压缩html、压缩js
- 7.压缩css

1.初识Webpack

什么是webpack?
- Webpack是一个模块打包器（意思同构建工具，所谓构建︰将程序员写完的【源代码】，加工生成浏览器可以︰高效、稳定运行的，兼容性较好的代码。曾经的构建工具：grunt、gulp，但现在绝对是webpack）。
- 在Webpack中会将前端的所有资源文件(js/json/css/img/less/…）都作为模块处理。它将根据模块的依赖关系进行分析，生成对应的资源
- webpack是构建在node环境基础上的，必须先安装node环境
- webpack在2020-11-11发布了webpack5.0，所以现在需要安装npm i webpack@4，来指定4.0版本的webpack
五个核心概念:
1. 【入口(entry)】：指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。
2. 【输出(output)】：在哪里输出文件，以及如何命名这些文件。
3. 【Loader】:处理那些非JavaScript 文件(webpack自身只能解析JavaScript和json)。
4. 【插件(plugins)】：执行范围更广的任务，从打包到优化都可以实现。
5. 【模式(mode)】：有生产模式production和开发模式development
对loader的理解
- webpack本身只能处理]JS、JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader
- 它本身是一个函数，接受源文件作为参数（所以要基于node环境，因为js代码要读取源文件），返回转换的结果。
- loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如css-loader。
对plugins的理解
- 插件可以完成一些loader不能完成的功能。
配置文件
- webpack.config.js:用于存储webpack配置信息。

2.开启项目

初始化项目:
- 使用npm init或yarn init生成一个package.json文件
```
{
"name": "webpack_test",
"version" : "1.0.0"
}
```
安装webpack
- npm install webpack@4 webpack-cli@3 -g //全局安装,作为指令使用
- npm install webpack@4 webpack-cli@3 -D // 本地安装,作为本地依赖使用

3.处理js和json文件

创建文件
- src/js/app.js
- src/js/module1.js
- src/is/module2.is
创建主页面
- src/index.html
运行指令
- 打包指令(开发)∶
```
webpack ./src/js/app.js -o ./build/js/app.js --mode=development
```
  - 功能: webpack能够打包js和json文件，并且能将es6的模块化语法转换成浏览器能够识别的语法
- 打包指令(生产):
```
webpack ./src/js/app.js -o ./build/js/app.js --mode=production
```
  - 功能:在开发配置功能上加上一个压缩代码的功能
- index.html页面中引入: build/js/app.js
结论:
- webpack能够编译打包js和json文件
- 能将es6的模块化语法转换成浏览器能识别的语法（注意，仅仅是转es6的模块化语法）
- 能压缩代码
缺点:
- 不能编译打包css、img等文件
- 不能将js的es6基本语法转化为es5以下语法
改善:使用webpack配置文件解决，自定义功能

webpack小试牛刀

首先，安装webpack4.0版本:npm install webpack@4 webpack-cli@3 -g。

分别使用commonJs和ES6模块化语法编写js代码

// 
const data = 'atguigu'
const msg = 'hello'

module.exports = {
	showData (){
		console.log(data);
	},
	showMsg(){
		console.log(msg);
	}
}

// 
export const teacher1 = {name:'强哥',age:15}
export const teacher2 = {name:'歌神',age:17}

//使用【统一暴露】
const stu1 = {name:'王宇',age:18}
const stu2 = {name:'宇航',age:19}
export {stu1,stu2}
export {stu1 as stu11,stu2 as stu22}

//使用【默认暴露】
export default {
	school:'尚硅谷',
	address:'宏福科技园',
	subjects:['前端','java','大数据']
}

// 
// 使用commonJs语法
const m1 = require('./module1') //引入自定义模块
m1.showData()
m1.showMsg()

// 使用es6语法
import m2,{teacher1,teacher2,stu1,stu2,stu11,stu22} from './module2'
console.log(m2);
console.log(teacher1);
console.log(teacher2);
console.log(stu1);
console.log(stu2);

运行命令：webpack ./src/js/app.js -o ./build/js/app.js --mode=development

index.html
引入打包后的js

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script src="../build/js/app.js">script>
body>
html>

webpack打包js/json文件

// 
const data = 'atguigu'
const msg = 'hello'

module.exports = {
	showData (){
		console.log(data);
	},
	showMsg(){
		console.log(msg);
	}
}

// 
export const teacher1 = {name:'强哥',age:15}
export const teacher2 = {name:'歌神',age:17}

//使用【统一暴露】
const stu1 = {name:'王宇',age:18}
const stu2 = {name:'宇航',age:19}
export {stu1,stu2}
export {stu1 as stu11,stu2 as stu22}

//使用【默认暴露】
export default {
	school:'尚硅谷',
	address:'宏福科技园',
	subjects:['前端','java','大数据']
}

// 
{
	"name":"老刘",
	"age":18
}

// 

// app.js是webpack的入口，所有外部文件(js、json、css、less等等)都需要在这里引入使用（注意是所有外部文件，包括图片、样式、json文件、js等）

// 使用commonJs语法
const m1 = require('./module1') //引入自定义模块
m1.showData()
m1.showMsg()

// 使用es6语法
import m2,{teacher1,teacher2,stu1,stu2,stu11,stu22} from './module2'
console.log(m2);
console.log(teacher1);
console.log(teacher2);
console.log(stu1);
console.log(stu2);	

// 在es6的模块化语法中，引入一个json文件（它默认会以default的方式暴露，所以如下引入）
import jsonData = '../json/test.json'

// 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../build/js/app.js"></script>
</body>
</html>

webpack默认不能处理css

// 
const data = 'atguigu'
const msg = 'hello'

module.exports = {
	showData (){
		console.log(data);
	},
	showMsg(){
		console.log(msg);
	}
}

// 
export const teacher1 = {name:'强哥',age:15}
export const teacher2 = {name:'歌神',age:17}

//使用【统一暴露】
const stu1 = {name:'王宇',age:18}
const stu2 = {name:'宇航',age:19}
export {stu1,stu2}
export {stu1 as stu11,stu2 as stu22}

//使用【默认暴露】
export default {
	school:'尚硅谷',
	address:'宏福科技园',
	subjects:['前端','java','大数据']
}

// 
{
	"name":"老刘",
	"age":18
}

// 
.title {
    background-color: #bfa;
    color: red;
}

// 

// app.js是webpack的入口，所有外部文件(js、json、css、less等等)都需要在这里引入使用（注意是所有外部文件，包括图片、样式、json文件、js等）

// 使用commonJs语法
const m1 = require('./module1') //引入自定义模块
m1.showData()
m1.showMsg()

// 使用es6语法
import m2,{teacher1,teacher2,stu1,stu2,stu11,stu22} from './module2'
console.log(m2);
console.log(teacher1);
console.log(teacher2);
console.log(stu1);
console.log(stu2);	

// 在es6的模块化语法中，引入一个json文件（它默认会以default的方式暴露，所以可如下引入）
import jsonData = '../json/test.json'

// 引入css（这是es6模块化语法中规定的）
import '../css/demo.css'

运行webpack命令，发现报错，因为目前webpack暂时还不能处理css这种文件类型，需要引入loader

4.webpack配置文件

目的:在项目根目录定义配置文件，通过自定义配置文件，还原以上功能
文件名称: webpack.config.js

配置如下：

同样在上面的文件夹中，在src同级目录下，创建webpack.config.js（webpack默认会读取该名字的文件作为配置文件）。直接输入webpack命令即可（因为使用了webpack配置文件替代前面的webpack ./src/js/app.js -o ./build/js/app.js --mode=development命令）

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
var path = require('path');
//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式，开发环境
    // mode: 'production', // 生产环境（二选一）
    entry: './src/js/app.js',//入口（精简写法）
    /*
    // 完整写法
   	 entry: {
		main:'./src/js/app.js'
	 }
	*/
    output: { //出口(输出)
        path: path.resolve(__dirname, 'build'), //输出文件的路径
        filename: 'app.js'//输出文件的名字
    }
}

5.打包less、css资源

概述：less、css文件webpack不能解析，需要借助loader编译解析
创建less文件
- src/css/demo1.less
- src/css/demo2.css
入口app.js文件
- 引入less、css资源
安装loader
- npm install css-loader style-loader less-loader less -D

配置loader

{
    test:/\.less$/,
    use: [
        'style-loader ',//创建style标签,将js中的样式资源插入进行,添加到head中生效
        'css-loader ',//将css文件变成commonjs模块加载js中,里面内容是样式字符串
        'less-loader'//将1ess文件编译成css文件
    ]
},
{
    test:/\.css$/,
    use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
        'style-loader ',//创建style标签，将js中的样式资源插入进行，添加到head中生效
        'css-loader'// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
    ]
}

运行指令
- webpack

1. 初始化npm包环境

在原文件夹中，执行npm init命令，初始化npm包环境

2. 安装css-loader和styleLoader

webpack默认只能处理js/json文件，并不能处理css样式文件，如果要处理css样式文件（包括解析css样式文件，兼容处理，压缩处理），就需要引入相应的loader了。

# --save表示将添加的依赖记录到package.json中， -dev表示为开发依赖
# xxx-loader 只需要在开发的时候，帮助我们加工代码，并不需要打包到生产中
# 以下命令同：npm install css-loader -D
npm install --save-dev css-loader
npm install style-loader -D

#后面发现打包的时候，报错，原因是版本太新了，不匹配当前的webpack4，用下面的
cnpm install [email protected] -D
cnpm i install css-loader@5 -D

开发依赖︰帮助程序员加工代码的库，都是开发依赖
生产依赖∶帮助程序员实现功能效果的库，都是生产依赖

3. webpack配置文件添加loader

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
var path = require('path');
//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry : {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: path.resolve(__dirname, 'build/js'), //输出文件的路径
        filename: 'app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
        	// 配置解析css
            {
                test:/\.css$/, // 该loader处理以css后缀名结尾的文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    'style-loader',  //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'css-loader' // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串   
                    // loader配置还有完整版写法，参考官方文档
                ]
            }
        ]
    }
}

其中，package.json文件如下

{
  "name": "front4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.7",
    "install": "^0.13.0",
    "style-loader": "^2.0.0"
  }
}

4. 运行webpack打包

运行webpack命令，最后只输出了app.js（样式内容其实打包到了这个js文件中，后面会由js代码动态创建style标签，将样式内容写到style标签中，再添加到head标签中）。现在的关键是：css文件也能够被处理了（还存在的问题：我们希望打包后经过兼容处理的css文件能单独出来）

可看到如下效果

5. 处理less文件

安装less-loader和less

cnpm i less-loader@3 -D
cnpm i less-loader@7 -D

安装完成之后的package.json文件如下：

{
  "name": "front4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.7",
    "install": "^0.13.0",
    "less": "^3.13.1",
    "less-loader": "^7.3.0",
    "style-loader": "^2.0.0"
  }
}

编写less文件，并再webpack指定的入口文件中引入

// 
body {
    div {
        background-color: pink;
        color: blue;
        border: 1px solid red;
    }
}

// 
... // 省略
import '../css/demo.css'
import '../css/demo2.less'
...

修改webpack配置文件，添加处理less文件的less-loader

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
var path = require('path');

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
const baseLoaders = ['style-loader','css-loader']

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: path.resolve(__dirname, 'build/js'), //输出文件的路径
        filename: 'app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            }
        ]
    }
}

运行指令

查看效果，less中的样式也生效了

6.打包html文件

概述:借助html-webpack-plugin插件打包html资源
创建html文件
- src/index.html
- 注意:不要在该html中引入任何css和js文件
安装插件:html-webpack-plugin
- npm install html-webpack-plugin -D
在webpack.config.js中引入插件(插件都需要手动引入，而loader会自动加载)
- const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

配置插件Plugins

plugins: [
    new HtmlwebpackPlugin({
        //以当前文件为模板创建新的HtML
        // (1．结构和原来一样2．会自动引入打包的资源)
        template: './src/index.htm1 ',
    }),
]

运行指令:webpack

1. 安装HtmlwebpackPlugin插件

# 要安装如下的版本， 否则会报错
cnpm install --save-dev html-webpack-plugin@4

# 这个也得安装（最好都本地安装上），否则在运行webpack命令时，会报错：Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
cnpm i wepack@4 webpack-cli@3 -D

此时，package.json文件如下：

{
  "name": "front4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.7",
    "html-webpack-plugin": "^4.5.2",
    "install": "^0.13.0",
    "less": "^3.13.1",
    "less-loader": "^7.3.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  }
}

2. 引入HtmlwebpackPlugin插件

在webpack.config.js配置文件中，配置该插件实例

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
const baseLoaders = ['style-loader','css-loader']

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, 'build'), //输出文件的路径
        filename: 'js/app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            }
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        })
    ]
}

3. 执行webpack命令

执行webpack命令，发现我们自己写的index.html被当作了模板，写的内容保留了下来，并且webpack会帮助我们自动引入打包后的app.js（我们在index.html模板中不必自己引入app.js）

查看效果，样式也生效了

7.打包样式中的图片

概述:图片文件webpack不能解析，需要借助loader编译解析
添加2张图片:
- 小图, 小于8kb: src/images/vue.png。
- 大图,大于8kb: src/images/react.jpg
在less文件中通过背景图的方式引入两个图片
安装loader
- npm install file-loader url-loader file-loader -D
- 补充: url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

配置loader

{
    test:/\.(jpglpnglgif)$/,
    loader:'url-loader', // url-loader是对fi1e-loader的上层封装
    options: {
        limit: 8 * 1024,//临界值为8KB，小于8KB的图片会被转为base64编码
        name:'[hash:10].[ext] ',//加工后图片的名字
        outputPath: 'imgs'//输出路径
    }
}

1. 安装并配置file-loader

安装file-loader
```
cnpm i file-loader@6 -D
```

配置file-loader

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
const baseLoaders = ['style-loader','css-loader']

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, 'build'), //输出文件的路径
        filename: 'js/app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
        	// 配置解析css
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            // 配置解析less
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        outputPath: '/imgs', // 配置图片加工后存放的位置
                        publicPath: '/build/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]' // //配置生成图片的名字+后缀
                    },
                  },
                ]
            },
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        })
    ]
}

2. 样式中引入图片后，打包

在样式中，使用图片，并打包（图片打包到了一个文件夹中，并且原来写的路径也被webpack改了，并统一加上了前缀）

查看效果

3. 使用url-loader

安装url-loader

# url-loader在file-loader的基础上又添加了功能
cnpm i url-loader@4

配置url-loader

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
const baseLoaders = ['style-loader','css-loader']

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, 'build'), //输出文件的路径
        filename: 'js/app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs', //配置图片加工后存放的位置
                        publicPath: '/build/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]', // //配置生成图片的名字+后缀
                        limit: 8 * 1024 //图片大小，小于8KB时，将图片转为base64编码
                    },
                  },
                ],
            },
            //处理图片资源

        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        })
    ]
}

使用webpack命令打包后，查看效果，小于8kb的图片转为了base64编码

8.打包html中的图片

概述:html中的标签url-loader没法处理，需要引入其他loader处理。
添加图片
- 在src/index.html添加一个img标签，src/images/angular.png
安装loader
- npm install html-loader --save-dev

配置loader

{
	//处理htm1中资源
	test: /\.html$/,
	loader : 'html-loader '
}

可能出现的坑:打包后html文件中的图片的src变成了: [object Module],
解决办法:url-loader中加入一个配置:esModule:false即可

1. 安装并配置html-loader

安装html-loader（注意：webpack4版本，需要安装如下的版本）
```
cnpm i -D [email protected]
```

配置html-loader（注意：url-loader需要添加配置es6Module:false，否则webpack打包后会出现图片src变成了: [object Module]的错误）

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
const baseLoaders = ['style-loader','css-loader']

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, 'build'), //输出文件的路径
        filename: 'js/app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs', //配置图片加工后存放的位置
                        publicPath: '/build/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]', // //配置生成图片的名字+后缀
                        limit: 8 * 1024, //图片大小，小于8KB时，将图片转为base64编码
                        esModule:false
                    },
                  },
                ],
            },
            // 配置解析html中的图片
            {
                test: /\.html$/,
                use: ['html-loader']
            }
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        })
    ]
}

2. html文件添加img标签

在index.html中，使用img标签引入图片

	DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div class="title">titlediv>
    <div class="vue">div>
    <div class="pscool">div>

    <img src="./imgs/jpg/pscool.jpg">
body>
html>

3. 打包

9.打包其他资源

概述:其他资源（字体、音视频等) webpack不能解析，需要借助loader编译解析
以处理几个字体图标的字体为例，font下添加几个下载好的字体文件:
- src/font/iconfont.eot
- src/font/iconfont.svgo src/font/iconfont.ttf
- src/font/iconfont.woff
- src/font/iconfont.woff2

修改incofont.css中字体的url

font-face {
	font-family: 'iconfont' ;
	src: url('../media/iconfont.eot');
	src: url('../media/iconfont.eot?#iefix') format(' embedded-opentype')，
	ur1('../media/iconfont.woff2 ' ) format('woff2 '),
	ur1('../media/iconfont.woff') format('woff'),
	ur1(' ../media/iconfont.ttf') format('truetype '),
	ur1(' ../media/iconfont.svg#iconfont ') format('svg');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-o5x-font-smoothing: grayscale;
}

修改html，添加字体图标，例如:

配置loader

{
	//处理其他资源(字体、音视频等等)
	exclude: /.(htm1|js|css|less|jpg|png|gif)/，//排除的文件
	loader : 'file-loader' ,
	options: {
		name:' [hash:10].[ext]',//命名
		outputPath: 'media'//输出路径
	}
}

运行指令
```
webpack
```

1. 引入ali字体文件

按照如下，引入ali的图标字体文件，在app.js入口文件中引入iconfont样式，并在index.html中使用该样式

此时，直接使用webpack打包，将会报错

2. 配置file-loader

配置解析字体文件的loader

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
const baseLoaders = ['style-loader','css-loader']

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, 'build'), //输出文件的路径
        filename: 'js/app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs', //配置图片加工后存放的位置
                        publicPath: '/build/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]', // //配置生成图片的名字+后缀
                        limit: 8 * 1024, //图片大小，小于8KB时，将图片转为base64编码
                        esModule:false
                    },
                  },
                ],
            },
            // 配置解析html中的图片
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            // 配置解析字体文件
            {
                exclude: /\.(html|less|css|png|jpg|gif|bmp|js|json)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'media', // 配置图片加工后存放的位置
                            name: '[hash:5].[ext]' // 配置生成图片的名字+后缀
                        }
                    }
                ]
            }
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        })
    ]
}

3. 打包

运行webpack命令，打包如下
查看效果
- 其中，字体的引入如下（发现路径也改了）

10.devServer

安装webpack-dev-server
- npm install webpack-dev-server --save-dev
详细配置见官网:指南>开发环境->使用webpack-dev-server

修改webpack配置对象，追加devServer配置（注意不是loader中追加)

// devServer配置(开发模式所特有的配置)
devServer: {
	contentBase: resolve(__dirname，'build')，//本地打包文件的位置
	port: 3000，//端口号
	open: true //自动打开浏览器
}

修改package.json中scripts指令
- “dev” : “webpack-dev-server” ，
运行指令:npm run dev或者yarn dev

至此，你已经完成了用webpack搭建一个简单的开发环境，但这套配置只适用于开发过程中调试代码，项目上线并不能运用这套配置，因为你还有很多的问题没有处理，比如:Css还不是单独的文件，css、js还有很多兼容性问题等等，接下来我们开始去搭建生产环境。

1. 安装webpack-dev-server

## 查看npm全局安装包所在文件夹
npm root -g 

## 移除全局安装的webpack-dev-server
npm remove webpack-dev-server -g

## 全局安装webpack-dev-server
npm remove webpack-dev-server -g

## 安装如下版本，否则会报错（当前使用的是webpack4）,
## 			  并且全局安装和本地安装最好都安装同一版本
cnpm i webpack-dev-server@3 -g
cnpm i webpack-dev-server@3 -D

此时package.json

{
  "name": "front4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@webpack-cli/serve": "^2.0.1",
    "css-loader": "^5.2.7",
    "file-loader": "^6.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.2",
    "install": "^0.13.0",
    "less": "^3.13.1",
    "less-loader": "^7.3.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  }
}

2. webpack.config.js中配置devServer

注意，当我们使用webpack-dev-server启动时，发现之前的配置并不能让图片显示出来，可以按照下面的配置作出修改（修改url-loader中publicPath，把它注释掉，这样使用webpack打包或使用webpack-dev-server启动就都可以看到图片了）

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
const baseLoaders = ['style-loader','css-loader']

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, 'build'), //输出文件的路径
        filename: 'js/app.js'//输出文件的名字
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs', //配置图片加工后存放的位置
                        // publicPath: '/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]', // //配置生成图片的名字+后缀
                        limit: 8 * 1024, //图片大小，小于8KB时，将图片转为base64编码
                        esModule:false
                    },
                  },
                ],
            },
            // 配置解析html中的图片
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            // 配置解析字体文件
            {
                exclude: /\.(html|less|css|png|jpg|gif|bmp|js|json)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'media', // 配置图片加工后存放的位置
                            name: '[hash:5].[ext]' // 配置生成图片的名字+后缀
                        }
                    }
                ]
            }
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        })
    ],
    devServer: {
        port: 8082,// 开启服务器的端口号
        open:true, //自动打开浏览器
        hot: true // 开启模块热更新(热模替换)
    }
}

3. 使用webpack-dev-server命令启动

运行命令：webpack-dev-server即可
同时修改文件时，可实时生效

11. 生产环境准备:

配置script命令

新建config文件夹，重命名webpack.config.js为webpack.dev.js，放入config文件夹
复制webpack.dev.js，重命名为webpack.prod.js,删除其中的devServer配置，因为这是开发环境特有的，生产环境是不需要的

修改package.json中scripts指令:

"start" : "webpack-dev-server --config ./config/webpack.dev.js",
"bui1d" : "webpack --config ./config/webpack.prod.js "

修改output中path为: path: resolve(__dirname，‘…/build’)

操作

复制原来的webpack.config.js到新建的config目录下，并重新命名为webpack.dev.js和webpack.prod.js，
在webpack.prod.js中修改输出的路径为…/build，并且去除里面的devServer（因为生产环境用不到它，但是开发环境仍然保留）
```
"scripts": {
  "start":"webpack-dev-server --config ./config/webpack.dev.js",
  "build":"webpack --config ./config/webpack.prod.js"
},
```

1.提取css为单独文件

安装插件
- npm install mini-css-extract-plugin -D
引入插件
- const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

配置loader

//引入mini-css-extract-plugin,用于提取css为单独文件
const MinicssExtractP1ugin = require( 'mini-css-extract-plugin');
{
 	// 处理1ess资源
	test: /\.less$/ ,
	use: [
		MiniCssExtractPlugin.loader ,
		'css-loader ',
		'less-loader ',
	]
},
{
	//处理css资源
	test: /\.css$/ ,
	use: [
		MiniCssExtractPlugin.loader ,
		'css-loader'
	]
}

配置插件

//提取css为单独文件
new MinicssExtractplugin({
	//对输出的css文件进行重命名
	filename: 'css/built.css'，
})

运行指令
- npm run build
备注
由于在提取了独立的文件，要从外部引入，所以可能会有路径问题，解决方案是在output配置中，添加: publicPath: '/' 。 publicPath根据实际情况自行调整,若上线运行值为:/imgs，若本地右键运行值为:/build/imgs

1. 安装 MiniCssExtractPlugin

到https://www.npmjs.com/package/mini-css-extract-plugin查看安装使用说明

## 指定需要安装的版本，否则报错
cnpm install mini-css-extract-plugin@1 -D

2. 配置MiniCssExtractPlugin.loader

因为只是生产中要使用，所以只须修改webpack.prod.js配置文件（文件如下）
先引入mini-css-extract-plugin，再配置MiniCssExtractPlugin作为插件，最后添加为loader使用。
（要注意一下路径的问题，因为我们是把css单独提取成一个文件，并且是添加到了一个文件夹中，会导致无法正常加载到这个css文件，需要在output中添加publicPath项，添加’/build/'作为统一前缀）

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//引入MiniCssExtractPlugin，用于提取css为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
// const baseLoaders = ['style-loader','css-loader']
const baseLoaders = [MiniCssExtractPlugin.loader,'css-loader']



//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, '../build'), //输出文件的路径
        filename: 'js/app.js',//输出文件的名字
        publicPath: '/build/'
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs', //配置图片加工后存放的位置
                        // publicPath: '/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]', // //配置生成图片的名字+后缀
                        limit: 8 * 1024, //图片大小，小于8KB时，将图片转为base64编码
                        esModule:false
                    },
                  },
                ],
            },
            // 配置解析html中的图片
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            // 配置解析字体文件
            {
                exclude: /\.(html|less|css|png|jpg|gif|bmp|js|json)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'media', // 配置图片加工后存放的位置
                            name: '[hash:5].[ext]' // 配置生成图片的名字+后缀
                        }
                    }
                ]
            },            
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        }), 
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ]
}

3. 打包

使用npm run build打包，可以看到使用link标签引入了提取的样式
- 入口文件中所引入的样式（前面已有）
查看效果

2.css兼容性处理

安装loader

npm install postcss postcss-loader postcss-preset-env -D

因为css和less样式文件都要进行兼容性处理，所以我们定义好一个通用的配置:

// 配置一个commonCssLoader ，处理less和css时都会使用
const commonCssLoader = [
	MiniCssExtractPlugin.loader ,//提取css为单独的文件
	'css-loader ',//将css文件变成commonjs模块加载js中，里面内容是样式字符串{
	//注意:想让postcss-loader工作，还需在package.json中定义browserslist配器兼容程度
	loader : 'postcss-loader',
	options: {
		ident: 'postcss',
		plugins: ()=>[require('postcss-preset-env')()]
	}
];

修改css-loader和less-loader配置

{
	//处理css资源
	test: /.css$/ ,
	use: [...commonCssLoader]
},
{
	//处理less资源
	test: /.less$ / ,
	use: [...commonCssLoader ,'less-loader ']
}

配置package.json，在其中追加browserslist配置，通过配置加载指定的css兼容性样式

"browserslist" : {
	//开发环境
	"development" :[
		"last 1 chrome version",
		"last 1 firefox version",
		"last 1 safari version"
	],
	//生产环境:默认是生产环境
	"production": [
		">0.2%",//兼容市面上99.8%的浏览器
		"not dead",//"死去"的浏览器不做兼容，例如IE8
		"not op_mini all",//不做opera浏览器mini版的兼容
		"ie 10"//兼容IE10
	]
}

备注1:browserslist 是一套描述产品目标运行环境的工具，它被广泛用在各种涉及浏览器/移动端的兼容性支持工具中，详细配置规则参考: https://github.com/browserslist/browserslist
备注2:若出现版本不兼容，或配置不正确的错误，那么需更换依赖包版本:
```
npm i less-loader@5 postcss-1oader@3
```
运行指令
- npm run build

1. 安装 postcss相关loader

# 安装最新版本会报错，注意下它们的版本（与当前webpack4不匹配）
npm install [email protected] [email protected] [email protected] -D

2.package.json添加browserslist

{
  "name": "front4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@webpack-cli/serve": "^2.0.1",
    "css-loader": "^5.2.7",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.26.0",
    "file-loader": "^6.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.2",
    "install": "^0.13.0",
    "less": "^3.13.1",
    "less-loader": "^7.3.0",
    "mini-css-extract-plugin": "^1.6.2",
    "postcss": "^8.4.19",
    "postcss-loader": "^4.0.3",
    "postcss-preset-env": "^7.8.3",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 8"
    ]
  }
}

3. 配置webpack.prod.js

修改mode为production，并配置postcss-loader

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//引入MiniCssExtractPlugin，用于提取css为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
// const baseLoaders = ['style-loader','css-loader']
const baseLoaders = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    'postcss-preset-env',
                ]
            }
        }
    }
]



//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'production',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, '../build'), //输出文件的路径
        filename: 'js/app.js',//输出文件的名字
        publicPath: '/build/'
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs', //配置图片加工后存放的位置
                        // publicPath: '/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]', // //配置生成图片的名字+后缀
                        limit: 8 * 1024, //图片大小，小于8KB时，将图片转为base64编码
                        esModule:false
                    },
                  },
                ],
            },
            // 配置解析html中的图片
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            // 配置解析字体文件
            {
                exclude: /\.(html|less|css|png|jpg|gif|bmp|js|json)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'media', // 配置图片加工后存放的位置
                            name: '[hash:5].[ext]' // 配置生成图片的名字+后缀
                        }
                    }
                ]
            },            
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        }), 
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ]
}

4. 打包

运行 npm run build即可

3. js语法检查

概述:对js基本语法错误/隐患，进行提前检查
安装loader
- npm install eslint-loader eslint
安装检查规则库:
- npm install eslint-config-airbnb-base eslint-plugin-import
备注:eslint-config-airbnb-base定制了一套标准的、常用的js语法检查规则，推荐使用

配置loader

module: {
	rules: [
		{
			//对js进行语法检查
			test: /\.js$/,
			exclude: /node_modules/,
			//优先执行
			enforce: 'pre',
			loader : 'eslint-loader',
			options: {
				fix: true//若有问题自动修复，重要!!!!
			}
		}
	]
}

修改packge.json

"eslintConfig": {
	"extends": "airbnb-base", // 直接使用airbnb-base提供的规则
	"env": {
		"browser":true
	}
}

运行指令：webpack
备注:若出现: warning Unexpected console statement no-console警告，意思是不应该在项目中写console.log(),若想忽略，就在要忽略检查代码的上方输入一行注释: // eslint-disable-next-line即可。

简要

安装如下依赖

"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.26.0",

在package.json中配置如下内容

"eslintConfig": {
	"extends": "airbnb-base",
	"env": {
		"browser":true
	}
}

在webpack.prod.js的module.rules中配置如下loader

{
	//对js进行语法检查
	test: /\.js$/,
	exclude: /node_modules/,
	//优先执行
	enforce: 'pre',
	loader : 'eslint-loader',
	options: {
		fix: true//若有问题自动修复，重要!!!!
	}
}

4.js语法转换

概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理

安装loader

npm install babel-loader @babel/core @babel/preset-env --save -dev

配置loader

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
          loader: "babel-loader",
          options: {
               presets: ['@babel/preset-env']
          }
    }
}

运行指令：webpack

操作

安装如下版本的babel-loader @babel/core @babel/preset-env

{
  "name": "front4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.14.7",
    "@webpack-cli/serve": "^2.0.1",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^5.2.7",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.26.0",
    "file-loader": "^6.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.2",
    "install": "^0.13.0",
    "less": "^3.13.1",
    "less-loader": "^7.3.0",
    "mini-css-extract-plugin": "^1.6.2",
    "postcss": "^8.4.19",
    "postcss-loader": "^4.0.3",
    "postcss-preset-env": "^7.8.3",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 8"
    ]
  }
}

webpack.config.js中，添加babel-loader

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
    2.该文件要符合CJs模块化规范（因为webpack是基于node的）
*/
//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');

// 引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//引入MiniCssExtractPlugin，用于提取css为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//创建style标签，将js中的样式资源插入进行，添加到head中生效
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
// const baseLoaders = ['style-loader','css-loader']
const baseLoaders = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    'postcss-preset-env',
                ]
            }
        }
    }
]



//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'production',//工作模式
    // entry: './src/js/app.js',//入口
    entry: {
        peiqi: './src/js/app.js'
    },
    output: { //出口(输出)
        path: resolve(__dirname, '../build'), //输出文件的路径
        filename: 'js/app.js',//输出文件的名字
        publicPath: '/build/'
    },
    // module.rules中配置的一个一个的loader
    module: {
        rules: [
            {
                test: /\.css$/, // 该loader处理css文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders
                ]
            },
            {
                test: /\.less$/, // 该loader处理less文件
                use: [ // use数组中1oader执行顺序:从右到左，从下到上依次执行
                    ...baseLoaders, 
                    'less-loader'
                ]
            },
            // 配置解析样式中的图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs', //配置图片加工后存放的位置
                        // publicPath: '/imgs', //配置图片引入时前缀路径
                        name: '[hash:5].[ext]', // //配置生成图片的名字+后缀
                        limit: 8 * 1024, //图片大小，小于8KB时，将图片转为base64编码
                        esModule:false
                    },
                  },
                ],
            },
            // 配置解析html中的图片
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            // 配置解析字体文件
            {
                exclude: /\.(html|less|css|png|jpg|gif|bmp|js|json)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'media', // 配置图片加工后存放的位置
                            name: '[hash:5].[ext]' // 配置生成图片的名字+后缀
                        }
                    }
                ]
            }, 
            {
				//对js进行语法检查
				test: /\.js$/,
				exclude: /node_modules/,
				//优先执行
				enforce: 'pre',
				loader : 'eslint-loader',
				options: {
					fix: true//若有问题自动修复，重要!!!!
				}
			},
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                      loader: "babel-loader",
                      options: {
                           presets: ['@babel/preset-env']
                      }
                }
            }       
        ]
    },
    // plugins中专门用于配置插件，插件必须经过实例化这一环节
    plugins: [
        // 实例化HtmlWebpackPlugin插件
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        }), 
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ]
}

在app.js中使用箭头函数语法

const a = {f:()=>{console.log('#0826#')}}
const {f} = a
f();

运行 npm run build，发现箭头函数已经转换了（当去掉babel-loader时，编译后的app.js中箭头函数还在）

5.js兼容性处理

安装包
```
npm install @babel/polyfill
```

使用

- app.js
	import  '@babel/polyfill';//包含es6的高级语法的转换

如上操作即可（安装版本：@babel/polyfill 7.12.1），可在app.js中编写Promise，并且import ‘@babel/polyfill’，编译后，发现该Promise函数被转换了

6.压缩html、压缩js

直接修改webpack.prod.js中的mode为production即可

备注：若设置了模式为production报错，必须在new HtmlWebpackPlugin时添加配置minify:false

new HtmlwebpackPlugin(i
	//以当前文件为模板创建新的HtML(1．结构和原来一样2．会自动引入打包的资源)
	template: './src/index.htm7'，
	minify: false
}),

7.压缩css

安装插件

npm install optimize-css-assets-webpack-plugin --save -dev

引入插件

//引入OptimizeCssAssetsPlugin，用于压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

配置插件

new OptimizeCssAssetsPlugin({
    cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
    },
})

你可能感兴趣的:(前端学习,webpack,前端,javascript)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
JavaScript中秋快乐！ Q_w7742 javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
ztree异步加载 3213213333332132 JavaScript Ajax json Web ztree
相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。设置setting，这里只关注async属性的配置 var setting = { //异步加载配置
thirft rpc 具体调用流程 BlueSkator 中间件 rpc thrift
Thrift调用过程中，Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类，这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作：（1）将客户端程序调用的函数名和参数传递给协议层（TProtocol），协议
异或运算推导, 交换数据 dcj3sjt126com PHP 异或 ^
/* * 5 0101 * 9 1010 * * 5 ^ 5 * 0101 * 0101 * ----- * 0000 * 得出第一个规律: 相同的数进行异或, 结果是0 * * 9 ^ 5 ^ 6 * 1010 * 0101 * ---- * 1111 * * 1111 * 0110 * ---- * 1001
事件源对象周华华 JavaScript
<!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/1999/xhtml&q
MySql配置及相关命令 g21121 mysql
MySQL安装完毕后我们需要对它进行一些设置及性能优化，主要包括字符集设置，启动设置，连接优化，表优化，分区优化等等。一修改MySQL密码及用户
[简单]poi删除excel 2007超链接 53873039oycg Excel
采用解析sheet.xml方式删除超链接，缺点是要打开文件2次,代码如下: public void removeExcel2007AllHyperLink(String filePath) throws Exception { OPCPackage ocPkg = OPCPac
Struts2添加 open flash chart 云端月影
准备以下开源项目： 1. Struts 2.1.6 2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009) 3. jofc2，这东西不知道是没做好还是什么意思，好像和ofc2不怎么匹配，最好下源码，有什么问题直接改。 4. log4j 用eclipse新建动态网站，取名OFC2Demo，将Struts2 l
spring包详解 aijuans spring
下载的spring包中文件及各种包众多，在项目中往往只有部分是我们必须的，如果不清楚什么时候需要什么包的话，看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包，关于发布包下面会详细进行说明。 docs&nb
网站推广之seo概念 antonyup_2006 算法 Web 应用服务器搜索引擎 Google
持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时，准备了解下网站的推广分析策略。所谓网站推广，目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。网站推广策略有很多，seo，email，adv
单例模式,sql注入,序列百合不是茶单例模式序列 sql注入预编译
序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时需要使用序列创建一个自增长的字段居然不会了,所以将序列写在本篇的前面 1,序列是一个保存数据连续的增长的一种方式; 序列的创建; CREATE SEQUENCE seq_pro 2 INCREMENT BY 1 -- 每次加几个 3
Mockito单元测试实例 bijian1013 单元测试 mockito
Mockito单元测试实例： public class SettingServiceTest { private List<PersonDTO> personList = new ArrayList<PersonDTO>(); @InjectMocks private SettingPojoService settin
精通Oracle10编程SQL(9)使用游标 bijian1013 oracle 数据库 plsql
/* *使用游标 */ --显示游标 --在显式游标中使用FETCH...INTO语句 DECLARE CURSOR emp_cursor is select ename,sal from emp where deptno=1; v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; begin ope
【Java语言】动态代理 bit1129 java语言
JDK接口动态代理 JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式，为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联 package com.tom; import com.tom.model.User; import com.tom.service.IUserService;
Java通信之URL通信基础白糖_ java jdk webservice 网络协议 ITeye
java对网络通信以及提供了比较全面的jdk支持，java.net包能让程序员直接在程序中实现网络通信。在技术日新月异的现在，我们能通过很多方式实现数据通信，比如webservice、url通信、socket通信等等，今天简单介绍下URL通信。学习准备：建议首先学习java的IO基础知识 URL是统一资源定位器的简写，URL可以访问Internet和www，可以通过url
博弈Java讲义 - Java线程同步 (1) boyitech java 多线程同步锁
在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件，共用数据库连接，全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。同步不仅可以阻止一个线程看到对象处于不一致的状态，它还可以保证进入同步方法或者块的每个线程，都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件（cri
java-给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 bylijinnan java
public class DeleteExtraSpace { /** * 题目：给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 * 方法1.用已有的String类的trim和replaceAll方法 * 方法2.全部用正则表达式，这个我不熟 * 方法3.“重新发明轮子”，从头遍历一次 */ public static v
An error has occurred.See the log file错误解决！ Kai_Ge MyEclipse
今天早上打开MyEclipse时，自动关闭！弹出An error has occurred.See the log file错误提示！很郁闷昨天启动和关闭还好着！！！打开几次依然报此错误，确定不是眼花了！打开日志文件！找到当日错误文件内容： --------------------------------------------------------------------------
[矿业与工业]修建一个空间矿床开采站要多少钱? comsci
地球上的钛金属矿藏已经接近枯竭........... 我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床..... 那么,现在要编制一个预算,提交给财政部门..
解析Google Map Routes dai_lm google api
为了获得从A点到B点的路劲，经常会使用Google提供的API，例如 [url] http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false [/url] 从返回的结果上，大致可以了解应该怎么走，但
SQL还有多少“理所应当”？ datamachine sql
转贴存档，原帖地址：http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html！ ------------------------------------华丽的分割线--------------------------------
Yii使用Ajax验证时，如何设置某些字段不需要验证 dcj3sjt126com Ajax yii
经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如: $form=$this->beginWidget('CActiveForm', array( 'id'=>'usuario-form',&
使用git同步网站代码 dcj3sjt126com crontab git
转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com 管理一网站，最开始使用的虚拟空间，采用提供商支持的ftp上传网站文件，后换用vps，vps可以自己搭建ftp的，但是懒得搞，直接使用scp传输文件到服务器，现在需要更新文件到服务器，使用scp真的很烦。发现本人就职的公司，采用的git+rsync的方式来管理、同步代码，遂
sql基本操作蕃薯耀 sql sql基本操作 sql常用操作
sql基本操作 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:30:33 星期一 &
Spring4+Hibernate4+Atomikos3.3多数据源事务管理 hanqunfeng Hibernate4
Spring3+后不再对JTOM提供支持，所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考：http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站：http://www.atomikos.com/ 一.pom.xml <dependency> <
jquery中两个值得注意的方法one()和trigger()方法 jackyrong trigger
在jquery中，有两个值得注意但容易忽视的方法，分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍 1） one方法 one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数，格式为 one(type,${data},fn) &nb
拿工资不仅仅是让你写代码的 lampcy 工作面试咨询
这是我对团队每个新进员工说的第一件事情。这句话的意思是，我并不关心你是如何快速完成任务的，哪怕代码很差，只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。这个说法其实很合理：我们的工作是思考客户提出的问题，然后制定解决方案。思考第一，代码第二，公司请我们的最终目的不是写代码，而是想出解决方案。话粗理不粗。付你薪水不是让你来思考的，也不是让你来写代码的，你的目的是交付产品
架构师之对象操作----------对象的效率复制和判断是否全为空 nannan408 架构师
1.前言。如题。 2.代码。 (1)对象的复制，比spring的beanCopier在大并发下效率要高，利用net.sf.cglib.beans.BeanCopier Src src=new Src(); BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
ajax 被缓存的解决方案 Rainbow702 JavaScript jquery Ajax cache 缓存
使用jquery的ajax来发送请求进行局部刷新画面，各位可能都做过。今天碰到一个奇怪的现象，就是，同一个ajax请求，在chrome中，不论发送多少次，都可以发送至服务器端，而不会被缓存。但是，换成在IE下的时候，发现，同一个ajax请求，会发生被缓存的情况，只有第一次才会被发送至服务器端，之后的不会再被发送。郁闷。解决方法如下： ① 直接使用 JQuery提供的 “cache”参数，
修改date.toLocaleString()的警告 tntxia String
我们在写程序的时候，经常要查看时间，所以我们经常会用到date.toLocaleString()，但是date.toLocaleString()是一个过时的API，代替的方法如下： package com.tntxia.htmlmaker.util; import java.text.SimpleDateFormat; import java.util.
项目完成后的小总结 xiaomiya js 总结项目
项目完成了，突然想做个总结但是有点无从下手了。做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。先说说项目主要实现的功能吧 1，按键精灵 2，获取行情数据 3，各种input输入条件判断 4，发送数据（有json格式和string格式） 5，获取预警条件列表和预警结果列表， 6，排序， 7，预警结果分页获取 8，导出文件（excel，text等） 9，修