# base-webpack

**Repository Path**: lisa_zhu2012/base-webpack

## Basic Information

- **Project Name**: base-webpack
- **Description**: 从零开始学习搭建一个webpack
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-21
- **Last Updated**: 2022-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# base-webpack

## 介绍

《从0到1彻底征服webpack》
快速掌握并深入理解webpack4.x的整体流程。从工作中常用的插件、技巧的使用及基础的配置到源码的深入研究webpack，最终，在配置自己工程化环境时可以做到游刃有余。

## webpack简介
基于node.js的一个打包工具。
### 作用
    1、优化：工程化。vue cli,react cli
    2、打包：将多个文件进行压缩，打包成一个文件（服务器中带宽最贵，可减少带宽）
    3、转换：es6,ts,jsx,less,sass
### 目标
    1、可以通过webpack对公司现有的项目进行从0开始的搭建。
    2、可以对vue,react脚手架进行添加与修改的操作。
    3、webpack当中的一些原理，流程
### webpack结构
    1、入口：entry
    2、出口：output
    3、插件：plugins
    4、devServer
    5、转换：loades
    6、module
    7、mode：模式----=》开发模式   生产模式
    * 开发环境（development）：敲打代码的位置。
    * 生产环境（production）：打完包以后放置到服务器上所属的环境。
### 打包、配置
0配置：不需要额外的配置；
默认配置项：默认将src下的index.js进行打包，打包到dist->main.js
### 安装教程
    webpack：webpack的核心模块
    webpack-cli：来执行webpack相关的命令行。
    cnpm install webpack webpack-cli -g
    webpack -v：查看当前安装的版本号。
*************************************************************
### webpack 命令
#### webpack
webpack：在项目根目录的命令行输入webpack：将src-->index.js ------>dist main.js当中
> 将一个文件打包的同时，与其相关联的文件也会一同打包（es6当中的模块化）
```
// src/user.js
export default {
    username: 'laotie'
}
// src/index.js
import user from './user.js'
console.log(user.username); // Run Code 会输出user模块的username
```
如果html中，想要使用打包前的index.js，可以这么引入：
> type="module" 支持es6语法
<script src="../src/index.js" type="module"></script>

如果html中，想要使用打包后的index.js，可以直接引入：
<script src="main.js"></script>
    
#### webpack --mode development /  webpack --mode=development
> 直接输入webpack打包会出现标黄的警告，提示指定mode
--mode：指定打包模式：开发development 生产 production 默认是生产环境。

#### webpack src/one.js src/two.js  --mode development
将多个文件打包一个
src/one.js
src/two.js

修改输出的文件名字或地址
--output：指定文件地址和名称进行输出
webpack src/one.js src/two.js  --mode development --output haha.js
webpack src/one.js src/two.js  --mode development --output my/haha.js
（输出在src同级的haha.js）

### package.js:在项目的根目录当中增加该文件
#### npm init -y
```
{
    "scripts":{
        "build":"webpack src/one.js src/two.js --output my/haha.js  --mode development"
    }
}
```
#### npm run build
可以通过npm run build进行打包，相当于webpack src/one.js src/two.js --output my/haha.js  --mode development
****************************************************
### webpack.config.js
> config.js:项目的一些配置：例如，常量 npm cnpm npx yarn 节省生产环境效率 webpack 节省开发环境效率

webpack的配置文件：详见demo2
```
module.exports = {
    mode:
    entry:
    output:{
        filename: '',
        path: ''
    }
}
```
* 运行webpack命令时，该命令需要与webpack.config同级别。
* 如果名字不为webpack.config.js，执行webpack --config xxx.js比如：shufu.config.js  可以通过 webpack --config shufu.config.js

#### 将多个文件打包成一个，多入口单出口
webpack的配置文件：详见demo3
```
module.exports = {
    mode:"development",
    // 设置成一个数组,数组当中的每一个元素即是打包的文件。
    entry:["./src/one.js","./src/two.js"],
    output:{
        filename:"bundle.js"
    }
}
```
#### 多入口多出口
```
module.exports = {
    mode:"development",
    // 设置成一个数组,数组当中的每一个元素即是打包的文件。
    // 可以是字符串，数组，对象
    entry:{
        one:"./src/one.js",
        two:"./src/two.js"
    },
    output:{
        // 将入口entry对象的属性名，替换[name]
        filename:"[name].bundle.js"
    }
}
```
#### clean-webpack-plugin
通过该插件可以实现在打包时，清空原有的内容，详见demo3

1、下载
> 在外层base-webpack下载，几个demo中都可使用该插件

cnpm install clean-webpack-plugin -D

2、引入

const {CleanWebpackPlugin} = require("clean-webpack-plugin");

3、使用
> plugins类型是一个数组，该数组的每一个元素是你要使用的plugin（插件）

plugins:[
    new CleanWebpackPlugin()
]

#### html-webpack-plugin
1、下载
> html-webpack-plugin：插件需要依赖 webpack webpack-cli

cnpm install webpack webpack-cli -D
cnpm install html-webpack-plugin -D

2、引入

const HtmlWebpackPlugin  = require("html-webpack-plugin")

3、使用
```
const  {CleanWebpackPlugin}  = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    mode:"development",
    entry:{
        "index":"./src/main.js"
    },
    output:{
        filename:"[name].bundle.js"
    },
    // plugins类型是一个数组。该数组的每一个元素是你要使用的plugin(插件)
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",// 指定模板地址
            filename: "home.html",// 将打包后的文件名字进行重置，默认是index.html

            hash:true, // 为引入js的地址增加后缀，用于清除缓存
            inject: true, // 是否嵌入到html文件当中，默认true
            inject: "body", // 嵌入到body/head 默认是body
            // chunks: ["one"], // 入口属性名，并不是文件名，指定打包的文件（用于文件多，只需要引入其中1,2个的时候）
            // excludeChunks: ["one"], // 除了入口属性one的文件，全部打包
            title: '大家好，现在学习的是webpack', // public/index.html <title><%= htmlWebpackPlugin.options.title%></title>
            arr: [1,2,3,4], // 模板渲染，详见pubilc/index.html
            minify: {
                removeComments: true, // 清除注释
                removeAttributeQuotes: true, // 移除双引号
                collapseWhitespace: true, // 进行折叠，去除空格
            }
        })
    ]
}
```
******************************************
### devServer
> 可以通过该属性设置webpack当中的服务。

vue react  开发与生产环境
    两个内容：
        服务代理 proxy->
        地址重定向 ----> 单页面应用

#### 安装webpack-dev-server
cnpm install webpack-dev-server -g

可以在命令行当中运行webpack-dev-server，此时，修改public/index.html页面会同步修改，但是，并没有进行再次打包，devServer是帮你开启的服务，这个服务用来执行开发中的内容，将你打包的内容放置在内存中，进行缓存处理。

在package.json进行配置后，可以执行npm run start，代替直接输入webpack-dev-server
```
"scripts": {
    "start": "webpack-dev-server"
},
```
#### 安装请求axios
cnpm install axios -S

webpack的配置文件：详见demo4
```
devServer: {
    open: true, // 是否在浏览器当中自动打开
    port: 8081, // 设置端口号
    host: "127.0.0.1",// 设置访问地址
    historyApiFallback: true, // 地址重定向
    proxy: { // 代理服务
        "/m": { // 代理的前缀标识
            target: "https://m.xxx.com", // 请求的服务
            changeOrigin: true,
            pathRewrite: {
                "^/m": ""
            }
        }
    }
}
```
********************************************************
### module

```
module: { // 加载转换， css less sass 图片 jsx react es6
    rules: [
        {
            test: /.\.css$/, // 医生的药方，道士的画符，程序员的正则，被称为天下三大奇文
            // cnpm install style-loader css-loader -D
            loader: ["style-loader","css-loader"], // 加载css，然后将css放置到style标签当中
        },{
            // less-loader 将less-->css less 依赖关系
            // cnpm install less less-loader -D
            test:/.\.less$/,
            loader:["style-loader","css-loader","less-loader"]
        },{
            // cnpm install sass-loader node-sass -D
            test:/.\.scss$/,
            loader:["style-loader","css-loader","sass-loader"]
        },{
            // cnpm install url-loader -D
            test:/.\.(png|gif|jpg)$/,
            // loader:["url-loader"]. // 使用use的形式可以多传入其他配置
            use:[
                {
                    loader:"url-loader",
                    query:{
                        limit: 1251119, // limit指定图片的大小，当图片小于该值时显示hash重命名的图片路径，大于该值时转换成base64文件
                        outputPath: "img"// 指定图片放置的文件夹
                    }
                }
            ]
        }
    ]
}
```
#### extract-text-webpack-plugin 脱离css的plugin
> 将所有文件都打包成一个文件里面，如何进行优化？项目大不建议打包成一个文件，可以拆分，具体情况看项目。

cnpm install extract-text-webpack-plugin -D

webpack的配置文件，详见demo5

执行webpack打包，会报错，因为版本问题，解决办法：下载插件最新版本，执行命令cnpm install extract-text-webpack-plugin@next -D

#### 模拟react脚手架
目标：模拟react脚手架，详见demo6
> 路由 服务代理 各种引入 css less sass 图片
import css

安装：cnpm install react react-dom react-router-dom axios -S

在模拟react写法时，不支持JSX，需要依赖对应的插件

安装：cnpm install babel-loader babel-core babel-preset-react babel-preset-env -D

运行npm run start 会报错，这里面有一个坑，就是babel-loader8不支持，需要重新下载@7版本，cnpm install babel-loader@7 -D

#### jsx 后缀名文件默认引入
```
resolve: {
    extensions: [".js", ".jsx"]
}
```
#### 其它
web前端：1、转行：服务器端-->前端  2、培训  3、自学成才

    全栈（web全端）
    不懂webpack的前端不是好前端
    为什么要优化，优化的是什么
    服务器究竟是个什么

webpack学习
1. 不是让你独立搭建项目
2. 对框架进行调整，去掉冗余代码
有能力可以独立构建自己的项目 vue react

************************************************谈资