# webpack-test

**Repository Path**: jhao-study/webpack-test

## Basic Information

- **Project Name**: webpack-test
- **Description**: 简单实用webpack打包js,css等资源
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack使用

@email su_jiehao@qq.com


[toc]

## 参考网址
https://www.webpackjs.com/

## 安装相关工具
```
npm init      //初始化npm环境 
npm install webpack  --save-dev   //webpack工具
npm install webpack-cli --save-dev     //webpack 编译命令行工具
npm install css-loader --save-dev     //使得js中可以require css
npm install style-loader --save-dev     //css打包后显示在html的loader
npm intall html-webpack-plugin --save-dev //webpack打包html的插件
npm install file-loader --save-dev  //处理图片的loader
```

## 使用姿势

####  我是姿势1
```
1.在根目录新建文件webpack.config.js
```
![](./assets/1.png)
内容如下，赶紧复制
```
const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: ['./script/main.js'],
        a: ['./script/a.js']
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name]-[chunkhash].js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            inject: 'head', //打包的js嵌入到html的标签可以是head,body
            minify: {
                collapseWhitespace: true, //删除空格
                removeComments: true, //删除注释

            }
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(png|jpg|gif|jpeg|svg)$/i,
            use: [{
                loader: 'file-loader',
                options: {
                    name: 'assets/[name]-[hash:5].[ext]?[hash]'
                }
            }]
        }]
    },
}
```

#### 我是姿势2

2.运行命令
node_modules/.bin/webpack  --progress --display-reasons --color

在dist文件夹下就会生成
![](./assets/2.png)
当然这是nodejs目录，所以可以在package.json文件中配置
```
    "scripts": {
        "webpack": "node_modules/.bin/webpack  --progress --display-reasons --color"
    },
```
然后在命令行中运行npm run webpack，技能效果等于上面,当然建个shell脚本跑也是可以的(推荐，可以做一些额外的打包相关操作）


## webpack配置说明
好了怎么用说完了，说下每个配置的大概意思。让我们回到webpack.config.js配置文件

#### entry
1.
```
entry: {
    main: ['./script/main.js', './script/b.js'],
    a: ['./script/a.js']
},
```
这个是入口文件配置，这里我配置了2个入口，main, a,即运行打包命令时会产出2个js文件main.js,a.js，当然你如果只配置一个也是可以的(同理只产生一个xxx.js)
```
['./script/main.js', './script/b.js'],
```
这个的意思是生成main.js文件的入口编译js包含2个,如果只包含一个的话，这个js再次require到的js也是会打包进去的，所以一个也行

#### output
2.
```
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name]-[chunkhash].js"
},
```
这个是打包输出配置
path:打包文件生成后存放的目录
filename:编译生成js文件名命名格式,这里采用了把js生成之后放在dist/js目录下，文件名使用跟entry的命名一直即[name]然后加上“-”然后加上文件的hash+“.js”

chunkhash说明看图，参考文档
![](./assets/3.png)

#### plugins
3.
```
plugins: [
    new HtmlWebpackPlugin({
        template: './index.html',
        inject: 'head', //打包的js嵌入到html的标签可以是head,body
        minify: {
            collapseWhitespace: true, //删除空格
            removeComments: true, //删除注释
        }
    })
],
```
这个htmlwebpack插件是用于压缩打包html文件

template:要打包的html文件，在这个html文件做任何修改，直接运行打包后会直接在dist目录下生成一样版本的html以及 在该html假如打包压缩后的js,如图
![](./assets/4.png)
我们看到head标签下有自动引入打包生成的js
再来看看template文件内容
![](./assets/5.png)
看到我们在template中没引入任何js,但是打包时会自动把打包的js引入到html下
```
    inject: 'head', //打包的js嵌入到html的标签可以是head,body
    minify: {
        collapseWhitespace: true, //删除空格
        removeComments: true, //删除注释
    }
```

inject作用:自己看注释,minify即压缩html时的压缩选项，可以有更多选项，请参考
https://webpack.js.org/plugins/html-webpack-plugin/

#### css，png等文件压缩
3.前面的说完了js文件跟html文件压缩，现在说下css，png等文件压缩
```
       rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(png|jpg|gif|jpeg|svg)$/i,
            use: [{
                loader: 'file-loader',
                options: {
                    name: 'assets/[name]-[hash:5].[ext]?[hash]'
                }
            }]
        }]
```
留意上面这里有2个规则
test:即匹配规则正则 /\.css$/, 匹配所有.css结尾的文件
css文件压缩后是直接打包到.js文件中的，如图
![](./assets/6.png)

我们在生成的main-xxx.js文件中国呢发现这些代码，这当然不是js代码，那js代码如何能运行css呢(表问我，我也不知道),我只知道只要通过css-loader模块就可以实现css的加载（即在js代码中发现是css文件不再用js的requie方式，而采用css-loader），load完css了，如何是加载的css在html中生效呢？style-loader所以不能少，如果少了这个插件你就会发现css根本效果不出来。

```
 test: /\.(png|jpg|gif|jpeg|svg)$/i
```
顺便解释下这个正则把，免得大概看到这些正则懵逼，这个意思是匹配.png或者.jpg或者.svg等等等的文件/i即不区分字母大小写.
```
use: [{
    loader: 'file-loader',
    options: {
        name: 'assets/[name]-[hash:5].[ext]?[hash]'
    }
}]
```
既然css都有自己的loader了，当然jpg少不了，图片采用的是file-loader模块，
   name: 'assets/[name]-[hash:5].[ext]?[hash]' //图片输出文件名为assets目录下，
   文件名在文件hash组成的文件名,这里你可以随便修改


#### 注意

```
body {
    padding: 0;
    margin: 0;
    background-color: rgb(255, 198, 196);
    background-image: url('../imgs/1.jpeg')
}
```
采用在css中引入图片，当使用webpack file-loader时是会自动产生1-xxx.jpg文件到dist的，这个怎么产生看你配置，当然这样才生是对的
![](./assets/7.png)
看到了把，这里自动把我的css打包后的路径直接改为我的产生图片了

但是假如是在html中这样使用图片呢，而不是在css中使用
```
<img src="./imgs/1.jpg">
```
这样的话由于
打包后图片被重新命名了，这个图片是不能正确加载的，所以要改为
```
  <img src="${require('./imgs/1.jpeg')}">
```
这样写，然后运行webpack打包时就会自动识别这个路径自动修改html

## 示例工厂地址
https://gitee.com/su_jiehao/webpack-test.git


## pdf地址
由于gitee大于1m外人不能下载文件，所以改为githud存储文件，这垃圾gitee,想支持你都不行哦
https://raw.githubusercontent.com/sujhao/webpak-test/master/README.pdf