# webpack-base

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

## Basic Information

- **Project Name**: webpack-base
- **Description**: 关于webpack的研究总结
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-17
- **Last Updated**: 2022-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webapck

## 安装

- 新版webpack需要安装两个包: `webpack`, `webpack-cli`

 ```
 npm i webapck webpack-cli -D
 ```
 
## 基本配置项目
- webpack.config.js
```js
const path=require('path');
module.exports={
    // 打包入口文件, 需要绝对路径
    // |---单一入口
    entry:path.join(__dirname,'./src/index.js'),
    // |--多入口     
    entry:{
        index:path.join(__dirname,'./src/index.js'),
        main:path.join(__dirname,'./src/main.js'),
    }
    // 打包出口
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'[name].bundle.js'
    },
    // 打包方式, 可选值: production(生产环境, 会压缩代码),development(开发环境)
    mode:'development',
    // 优化配置
    optimization:{
        // 抽离多入口中的公共依赖, 并打包成一个单独的js
        splitChunks:{
            chunks:'all'
        }
    } 
}
```


## webpack插件

### webpack-dev-server
- 作用: 开启一个开发服务器, 依赖`webpack`才能工作
- 安装: `npm i webpack-dev-server -D`
```js
const path=require('path');
module.exports={
    devServer:{
        // 指定开发服务器的根目录
        contentBase:'./src'
    }
}
```

### html-webpack-plugin
- 作用: 打包html;根据模板html在内存中生成一个html页面
- 安装:`npm i html-webpack-plugin -D`
- webpack.config.js
```js
const path = require('path');
// 根据模板html在内存中生成一个页面, 并且自动注入打包好的js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpack = new HtmlWebpackPlugin({
    // 设置网页title: 不知道什么原因不起作用
    title: 'webpack动态设置的title',
    template: path.join(__dirname, '../index.html'),
    filename: 'index.html',
    minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: false, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
    },
    // 给生成的 js 文件一个独特的 hash 值, 如下:
    // <script type=text/javascript src="bundle.js?22b9692e22e7be37b57e"></script>
    hash: true
});
module.exports={
    plugins:[htmlWebpack]
}
```

### clean-webpack-plugin
- 作用: 自动清理dist目录下没有被引用的文件
- 安装: `npm i clean-webpack-plugin -D`
```js
// 自动清理dist目录下没有被引用的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();
module.exports={
    plugins:[cleanPlugin]
}
```

## 使用express替代webpack-dev-server
- 依赖: `express`,`webpack-dev-middleware`
- server.js
```js
// 导入express
const express=require('express');
// 导入webpack
const webpack=require('webpack');
// 导入wepack.dev.config.js
const config=require('./webpack.dev.config');
//  导入webpack-dev-middleware
const webpackDevMiddleware=require('webpack-dev-middleware');
// 创建服务器
const app=express();
const compiler=webpack(config);

// 注册中间件
app.use(webpackDevMiddleware(compiler,{
    publicPath:config.output.publicPath
}));

// 启动服务器
app.listen(3000,()=>{
    console.log('http server running at http://localhost:3000');
});


```