webpack的基本的配置和应用

借用下官网的图，从图中我们了解webpack功能就是把带有依赖的模块打包成单一相同类别的静态资源文件。接下来帮大家分析下webpack的核心概念及一些辅助配置。

一、核心概念

webpack核心概念有这些：

• 入口（entry）
• 输出（output）
• loader
• 插件（plugin）
• 模式（mode）
• 浏览器兼容（browser compatitbility）
• 环境（environment）

前面五个配置都挺常见的，后面这两个有点陌生。接下来对这些核心概念一个一个分析：

1. 入口（entry）

入口起点，用来构建内部依赖图的开始（这个可以看下我写的第二篇文章，webpack实现过程），下面我举个单个入口打包的例子，也就是外面常见的单页面应用：

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

当然，单个入口打包肯定有它不足之处，如果我们子页面足够多的话，一个主系统对应很多个子系统，每次都要先加载下主页面，再异步加载下子页面，这样会使得混合起来就足够复杂和混乱，那我们这时候就需要多页面应用，子系统之间就不会相互影响，每次想要的页面直接找便可。也就是我们多入口打包。

那说下前端的实现：

1. 修改webpack config 的 entry,改成多个
2. 修改webpack config 的 插件HtmlWebpackPlugin，有几个入口就要生成几个index.html页面

实践可参考这篇文章：https://www.cnblogs.com/lvdabao/p/5944420.html

2. 输出(output)

这个属性就是告诉webpack输出在哪

webpack.config.js

const path = require('path');

module.exports = {
  entry: 'file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

多入口多出口配置

module.exports = {
    mode: 'development',
    entry: {
        index:__dirname + '/src/index.js',
        signup:__dirname + '/src/signup.js',
    },

    output: {
        path:__dirname + '/dist',
        filename: '[name].bundle.js',
    }
}

3. loader

webpack只能理解js和json文件，这是webpack开箱即用的自带能力。loader可以让webpack有效的处理其它的文件，把它们转换有效的模块，这里可以看我第三篇内容怎么实现webpack-loader。

1. test 属性，识别出哪些文件会被转换。
2. use 属性，定义出在进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

4. plugin

简单聊一句plugin和loader的一个功能上的区别。loader是用于转换某些类型的模块，而插件可以用于执行更广泛的任务。包括打包优化，资源管理，注入环境变量。之后在我第三篇文章会具体实现个webpack-plugin。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

5. 模式（mode）

模式有none，development，production

选项	描述
development	会将process.env.NODE_ENV的值设为development。启用NamedChunksPlugin和NamedModulesPlugin。
production	会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
none	没有任何配置

6. 浏览器兼容性(browser compatibility)

Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。

7. 环境(environment)

Webpack 5 运行于 Node.js v10.13.0+ 的版本。

二、 一些辅助配置

1. devserver

通过配置devserver选项，可以开启一个本地服务器。

常做了哪些事情：

• port：监听端口
• compress：压缩后通常能帮我们减少响应 70% 左右的大小;
• proxy：代理访问资源
• https：可以传入 true 来支持 https 访问，也支持传入自定义的证书

port:8080,
compress:true,
proxy: {
    '/proxy': {
        target: 'http://your_api_server.com',
        changeOrigin: true,
        pathRewrite: {
            '^/proxy': ''
        }
},
https: true,
//也可以传入一个对象，来支持自定义证书  
https: {    
         key: fs.readFileSync("/path/to/server.key"),  
         cert: fs.readFileSync("/path/to/server.crt"),  
         ca: fs.readFileSync("/path/to/ca.pem"),  
 },

2. devtool

这个属性就是调试代码的方式

3. cache

缓存生成的 webpack 模块和 chunk，来改善构建速度。

4. watch 和 watchOptions

Webpack 可以监听文件变化，当它们修改后会重新编译。这个页面介绍了如何启用这个功能，以及当 watch 无法正常运行的时候你可以做的一些调整。

5. Performance

配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。