# webpack-template

**Repository Path**: crazyboy115/webpack-template

## Basic Information

- **Project Name**: webpack-template
- **Description**: 搭建 webpack 项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-12-25
- **Last Updated**: 2020-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-template

#### 安装 webpack
`npm install --save-dev webpack`

**如果使用 webpack 4.0 还需要安装**

`npm install --save-dev webpack-cli`

>   `webpack` 支持**零配置**，安装既可以打包，也可以自动配置

>   在没有配置的情况下，默认查找项目中 `index.js` 为打包入口, 找不到则无法打包

#### 打包命令

`npx webpack`

`npx webpack --config webpack.base.config.js`   指定配置文件
`npx webpack -- --colors`   传递参数

配置到打包命令的快捷方式

`package.json -> scripts` 下增加

开发环境    
`"dev": "webpack --config ./webpack.dev.config.js"`

生产环境    
`"build": "webpack --config ./webpack.prod.config.js"`

#### 自定义配置文件

根目录下创建 `webpack.config.js`

再次 `npx webpack` 会从 `webpack.config.js` 读取配置

##### context

```javascript
// 上下文是入口文件所处的目录的绝对路径的字符串。  
// 指定后的上下文 F:\my\webpack-template\webpack   
// 指定上下文之后 会影响以后的路径 
// 见 entry    

context: path.resolve(__dirname, 'webpack'),
```
##### mode 模式

- development   
- productions
- none

##### entry 入口

```javascript
entry: {
    // 单页面
    index: './src/index.js',
    index: ['./src/index.js', './src/js/a.js'],

    // 多页面
    index: './src/index.js',
    page1: './src/page1.js',
    page2: './src/page2.js'

    // 指定 context
    // index: '../src/index.js'
    // index: ['../src/index.js', '../src/js/a.js']
},
```

##### output 出口

```javascript
output: {
    filename: '[name].js',  // 动态名字， 根据入口而定
    // filename: '[name].[hash].js',    // hash 缓存
    path: path.resolve(__dirname, 'dist'),  // 目录对应一个绝对路径
    publicPath: '/',    // 引用资源的地址
}
```
[详细参数](https://webpack.docschina.org/configuration/output/)

##### module 模块
    决定如何处理项目中的不同类型的模块

- rules 规则
    配置 `loader`, `loader` 用于对模块的源代码进行转换

    - `style-loader` 将模块的导出作为样式添加到 DOM 中
      `style-loader`  导致 `loader` 创建的 CSS 优先于目标中已经存在的 CSS (可通过 `insert` 来配置插入的位置)
    - `css-loader` 解析 CSS 文件后(将 CSS 转化成 CommonJS 模块)，使用 import 加载，并且返回 CSS 代码
    - `sass-loader` 将 Sass 编译成 CSS
    - `url-loader` `file-loader` 处理图片 
        `limit: 1024,    // 当大于这个值时  默认使用 file-loader 处理`
    - `babel-loader` 将 ES2015 转换成 ES5
        `babel-loader @babel/core @babel/preset-env`

##### resolve 配置模块如何解析
    ```javascript
    resolve: {
        modules: ["node_modules"],  // 告诉 webpack 解析模块时应该搜索的目录。
        extensions: ['.js', '.scss', '.css', '.jpg', 'jpge', '.png', '.gif'],   // 文件后缀
        alias: {    // 别名
            '@BScss': path.resolve(__dirname, 'node_modules/bootstrap/dist/css/'),
            '@js': path.resolve(__dirname, 'src/js')
        }
    }
    ```

##### plugins 插件

- webpack-dev-server 开发服务器
`npm install webpack-dev-server -D`

配置项 `devServer`

```javascript
devServer: {
    // 启动热更新 
    // 必须有 webpack.HotModuleReplacementPlugin 才能完全启用 HMR 
    // 启动时 添加参数 "dev": "webpack-dev-server --hotOnly --config ./webpack.dev.config.js"
    hot: true,  
    port: 8080,
    contentBase: './dist', // 告诉服务器从哪里读取资源
    open: true, // 自动打开浏览器
}
```

**修改启动命令**
```javascript
"scripts": {
    - "dev": "webpack --config ./webpack.dev.config.js"
    + "dev": "webpack-dev-server --config ./webpack.dev.config.js"
  },
```

[详细参数](https://webpack.docschina.org/configuration/dev-server/)

- clean-webpack-plugin 清空目录

- copy-webpack-plugin 复制文件夹、文件

    `to: ''` 为空时默认输出到 `output` 中指定的目录

- html-webpack-plugin 生成一个 HTML5 文件， 将 webpack 打包后的 js 插入 body 中
    单页面配置一个、多页面配置多个

- mini-css-extract-plugin 提取 css 到单独的文件并压缩

    代替 extract-text-webpack-plugin

- purifycss-webpack CSS中删除未使用的选择器

    需配合 mini-css-extract-plugin 一起使用
    如果没有输出任何CSS文件，则此插件将无效

- autoprefixer 配合 postcss-loader 实现样式前缀的自动填充

    提供浏览器的最佳方法是`.browserslistrc` 在项目根目录中添加一个文件，    
    或在 `package.json` 中添加一个 `browserslist` `key` 。

    ```javascript
    // package.json

    "browserslist": [ 
        "> 1%",
        "last 2 versions"
    ]
    ```

    `postcss-loader` 放在 `style-loader` `css-loader` 之后  
    `postcss-loader` 放在 `sass-loader` 之前
- webpack.IgnorePlugin 忽略一些包中引入的其它的包

    ```
    // 忽略 moment 中默认的语言包
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

    // 忽略后 需要设置语言包时需要手动引入
    import 'moment/locale/zh-cn'
    ```
- webpack.DllPlugin 提前打不不经常变动的依赖包，提升构建速度

    `output.library` 必须与 `webpack.DllPlugin(options)` `options.name` 一样

- add-asset-html-webpack-plugin 将 webpack.DllPlugin 打包好的依赖包 插入 html 中

- happypack 多线程打包，提升构建速度

    可以处理 js、css    
    大型项目效果更好

- new webpack.DefinePlugin 编译期间添加的全局常量

##### optimization 优化
    - splitChunks 分割代码

---

- 懒加载

```javascript
// 懒加载会另外打包成一个 js
// 通过 jsonp 的形式实现动态加载的
const Lazy = () => import('@js/lazy')

setTimeout(() => {
    Lazy().then(_ => {
        _.default.subtraction(3, 5)
    })
}, 1000)


// 配合下面的使用
// 分离出 costomVue
custom: {
    test: path.resolve(__dirname, './src/js'),
    name: 'custom',
    chunks: 'all',
    minChunks: 2
}
```

- 使用 vue 

    通过 `yarn add vue` 安装的 `vue`    
    在 `import vue from 'vue'` 时 使用的是  `vue.runtime.common.js` 版本
    vue -> package.json "main": "dist/vue.runtime.common.js"

    我们需要的是 `vue.js`   
    需要配置别名
    `'vue$': 'vue/dist/vue.js'`