# web4test

**Repository Path**: jaasdsa/web4test

## Basic Information

- **Project Name**: web4test
- **Description**: web4test
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# demo测试
# webpack 快速项目搭建
```bash
npm init -y
```
# package.json
```json
{
  "dependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "webpack-bundle-analyzer": "^3.8.0"
  }
}
```
```bash
# 安装依赖
npm i 
```
# webpack基本配置
```js
const path =require("path");
const moduleRegex=/(node_modules)|(dist\\)/;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports={
    entry:{
        index:"./src/index.js"
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename: "[name].js",
        chunkFilename: "[name].js"
    },
    mode: "development",
    devtool: "source-map",
    devServer:{
        hot: true,
        host:"0.0.0.0",
        port:8080,
        contentBase: path.join(__dirname, "dist"),
        writeToDisk:true,//写入硬盘
        historyApiFallback: {
          index: "/index.html", //browserHistory的时候，刷新会报404,自动重定向index.html
          verbose:true,
        }, 
    },
    optimization:{
        splitChunks : {
            chunks: "all", //默认作用于异步chunk，值为all/initial/async
            minSize: 30000, //默认值是30kb,代码块的最小尺寸
            minChunks: 1, //被多少模块共享,在分割之前模块的被引用次数
            maxAsyncRequests: 5, //按需加载最大并行请求数量
            maxInitialRequests: 3, //一个入口的最大并行请求数量
            name: true, //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔开，如vendor~
            automaticNameDelimiter: "~", //默认webpack将会使用入口名和代码块的名称生成命名,比如 'vendors~main.js'
            cacheGroups: {
              //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
              vendors: {
                // name: "vendors",
                test: /node_modules/, //条件
                priority: -10 ///优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中,为了能够让自定义缓存组有更高的优先级(默认0),默认缓存组的priority属性为负值.
              },
              commons: {
                minSize: 0, //最小提取字节数
                minChunks: 2, //最少被几个chunk引用
                priority: -20,
                reuseExistingChunk: true //    如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
              }
            },
          }
    },
    resolve:{
        extensions: [".js"]
    },
    module:{
        rules:[
            {
                test: /\.jsx?$/,
                exclude: moduleRegex, // js处理排除node_modules和libs
                use: [
                    {
                        loader: "babel-loader",
                        options:{
                            presets:["@babel/preset-env"]
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                          esModule: true,
                        },
                      },
                      {
                        loader: "css-loader",
                        options: {
                          importLoaders: 0, //样式里面不要再引入样式文件了
                        },
                      },
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[name].css",
            ignoreOrder: true, //  启用以删除有关顺序冲突的警告
          }),
        // new BundleAnalyzerPlugin()
    ]
}

```