# `Webpack`介绍

# 1.1 `Webpack`是什么

webpack是前端方面的静态资源打包工具,能够让浏览器也支持模块化,他会根据模块的依赖关系进行静态分析,然后按照某种规则生成静态资源

# 1.2 `WebPack`的作用

webpack的核心主要是进行JavaScript资源打包
把静态文件,例如png,sass,less,css,js等多个文件打包成一个文件,减少页面的请求
可以集成 http 服务器
可继承babel工具,实现ECMAScript6和5的转换,解决兼容问题
可以进行模块热加载,当代码发生改变的时候,自动刷新浏览器

# `Webpack`安装和案例

# 2.1`Webpack` 全局安装

安装webpack

安装webpack
npm install -g webpack
或者 安装最新版webpack 
npm install -g webpack@<version>

1
2
3
4

如果安装的是web pack4 以上的版本,还需要安装Webpack-Cli
```
npm install -g webpack-cli 
```
1
可以通过npm root -g 查看全局安装目录

# 2.2`Webpack`快速入门

__VSCode中安装node Snippets有代码提示

# 2.3 打包`Webpack`模块

webpack xxx -o yyy
这样就把文件打包成了yyy文件
使用的时候直接引入yyy文件,就不会出现 require is not define 这个问题

# 2.4打包配置文件 `webpack.confifig.js`

每当修改js文件,都要webpack重新打包,打包时还要指定入口和出口,都非常麻烦,通过配置文件进行修改
编写webpack.config.js

//引入path是为了解决路径的小工具
const path=require("path");

module.export={
    //入口文件
    entry:"./src/main.js",
    //出口  出口是一个对象
    output:{
    	path:path.join(__dirname,'./dist/'),
        filename:'build.js'
	}
}

1
2
3
4
5
6
7
8
9
10
11
12

编写package.json

{
    "script": {
        "show": "webpack -v",
        "start": "node xxx",
        "build": "webpack"
    }
}

1
2
3
4
5
6
7

# `EcmaScript6`行为规范

导出模块 export 等价于 ( module.exports )
导入模块 import 等价于 ( require )

# 安装Loader

webpack 本身具有打包JavaScript文件的能力,如果需要打包其他类型文件,则需要使用插件,这些插件被称为加载器( Loader )
Loader 可以看作为资源和模块的转换器,它本身是一个函数,接受的是源文件,返回值是转换后的结果
这样,我们就可以通过require和import 来引入不同的文件类型了
打包CSS文件

安装 style-loader 和 css-loader依赖
npm install -D style-loader css-loader
修改webpack.config.js

const path = require("path");

module.exports = {
    mode: "none",
    entry: "xxx", //入口文件
    output: {
    	path: path.join(__dirname,"xx") //输出文件路径
        filename: "xxxx.yy"  //输出文件的名字
	},
    module: {
        rules: [
            {
                test: /\.css$/,  //匹配后缀名为css的文件
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

打包Images资源文件

安装file-loader依赖
npm install -D file-loader
修改webpack.config.js

const path = require("path");

module.exports = {
    mode: "none",
    entry: "xxx",
    output: {
        path: path.join(__dirname,"xxx"),
        filename: "name"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-less",
                    "css-less"
                ]
            },
            {
                test: /\.(png|jpg|svg|fig)$/,
                use: [
                    "file-loader"
                ]
            }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

安装HtmlWebpackPlugin插件
目的: 将index.html 打包到build.js所在的目录当中

安装插件
npm install -D html-webpack-plugin
修改webpack.config.js

plugins: [
    new HtmlWebpackPlugin({
        template:'./index.html'
    })
]

1
2
3
4
5

修改index.html文件

//不需要再引入<srcipt src="xxxx.js">

# 实现重新加载

# 5.1说明

问题:

每一次手动打包很麻烦,打包之后还需要手动刷新浏览器
解决:

采用webpack提供的工具: webpack-dev-server , 他无需打包和手动刷新浏览器,会自动打包,提高开发效率

# 5.2实际操作

安装依赖:
```
npm install -D webpack-dev-server
```
1
修改webpack.config.js:

const path = require("path");
const htmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "none",
    entry: "xxx",  //入口文件
    output: {
        path: path.join(__dirname,xxx),
        filename: xxxx
    },
    //实现重新加载
    devServer:{
        contentBase: './dist'
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修改package.json

{
    "scripts":{
        "show": "webpac -v",
        "dev": "webapck-dev-server --open"
    }
}

1
2
3
4
5
6

# 浏览器兼容Babel

# 6.1安装Babel

npm install -D babel-loader @babel/core @babel/preset-env

# 6.2配置`Webpack.config.js`

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/, //排除的目录
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"] //内置好的转译工具
                }
            }
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 6.3`Main.js`代码

const a=1;

const arr = [1,2,3];
arr.foreach(item=>{
    console.log(item)
})

1
2
3
4
5
6

# 7`Vue-loader`打包`Vue`单文件组件

安装vue-loader和vue-template-compiler依赖

npm install -D vue-loader vue-template-compiler
修改webpack.config.js配置:

const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    //解析完整的Vue
    resolve: {
      alias: {
          'vue$': 'vue/dist/vue.js'
      }  
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugin: [
        //引入并且使用这个插件
        new VueLoaderPlugin()
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 模块热替换

修改webpack.config.js的代码

const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports={
    mode:"none",
    entry: "" ,
    output: {
        path: path.join(__dirname,xx),
        filename:xxx
    },
    devServer: {
        contentBase: 'xxx',
        hot: true
    },
    plugins: [
        //模块热替换
        new webpack.HotModuleReplacementPlugin(),
        //引入vue模块
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template: 'xxx'
        })
    ],
    modules: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style.loader',
                    'css-loader'
                ]
            },
            {
            	test: /\.(png|svg|jpg|gif)$/,
            	use: [
                    'file-loader'
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# `package.json`的配置

# `proxy` 字段

这个字段主要是用来解决跨域的问题
设置
```
"proxy": "http://localhost:9093"
```
1
使用

axios.get('/data').then((res)=>{
	console.log(res);
})

1
2
3
4

# 基本字段

name 项目名称
version 项目版本

# Scripts字段

用来运行npm脚本

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

1
2
3
4
5
6
7

使用的时候运行 npm run xxx对应上面的具体命令

# dependencies字段, devdependencies

分别指定项目运行所依赖的模板和项目开发时所需要的模板
对应的版本限制
- 比如1.2.2 大版本,次要版本,小版本
- ~1.2.2 表示安装1.2.x的最新版本不低于1.2.2版本不安装1.3.x
- ^1.2.2 表示安装1.x.x的最新版本不低于1.2.2版本不安装2.x.x
- latest 安装最新版本

# bin字段

用来指定内部可以执行文件的位置

{
    "bin":{
        "xxx": "xxx/xxx/xxx.js"
    }
}

1
2
3
4
5
6

# main字段

指定了加载的入口文件默认就是index.js

# repository字段

“repository”: {
	“type”: “git”,
	“url”: “git+https://github.com/XXXX”
},
“author”: “mayuan”,
“license”: “ISC”,
“bugs”: {
	“url”: “https://github.com/XXXX”
}

1
2
3
4
5
6
7
8
9
10

← 请求和响应 Webpack实现es6转换为es5 →

关于评论

评论前请填好“昵称”、“邮箱”这两栏内容，否则不会收到回复，谢谢！

# Webpack介绍

# 1.1 Webpack是什么

# 1.2 WebPack的作用

# Webpack安装和案例

# 2.1Webpack 全局安装

# 2.2Webpack快速入门

# 2.3 打包Webpack模块

# 2.4打包配置文件 webpack.confifig.js

# EcmaScript6行为规范

# 安装Loader

# 实现重新加载

# 5.1说明

# 5.2实际操作

# 浏览器兼容Babel

# 6.1安装Babel

# 6.2配置Webpack.config.js

# 6.3Main.js代码

# 7Vue-loader打包Vue单文件组件

# 模块热替换

# package.json的配置

# proxy 字段

# 基本字段

# Scripts字段

# dependencies字段, devdependencies

# bin字段

# main字段

# repository字段

# `Webpack`介绍

# 1.1 `Webpack`是什么

# 1.2 `WebPack`的作用

# `Webpack`安装和案例

# 2.1`Webpack` 全局安装

# 2.2`Webpack`快速入门

# 2.3 打包`Webpack`模块

# 2.4打包配置文件 `webpack.confifig.js`

# `EcmaScript6`行为规范

# 6.2配置`Webpack.config.js`

# 6.3`Main.js`代码

# 7`Vue-loader`打包`Vue`单文件组件

# `package.json`的配置

# `proxy` 字段