webpack入门总结

大部分配置文档官网非常详细，这里仅记录了入门学习时上手的一些demo和理解。

简介

webpack是一种构建工具，（构建工具相当于多个小工具的整合，比如将less转为css的工具，将ES6语法转为浏览器支持的语法等等，单个维护麻烦，因此整合起来）
webpack构建工具需要一个入口文件，比如index.js，根据入口文件内的依赖关系，引进所有文件，整合成一个块叫做chunk，针对chunk进行各项文件处理（比如进行将less转为css的工具，将ES6语法转为浏览器支持的语法等等，这一操作叫做打包），处理完之后输出bundle。
因此webpack是一个静态模块打包器（module bundler），上述话用一幅图概括：

webpack基于nodejs运行

概念

五大核心概念：entry, output, loader, plugin, mode（生产环境，本地调试运行；开发环境，项目运行上线）
官网文档参考链接

生产环境和开发环境均能将ES6语法转为浏览器能够识别的语法，生产环境会对代码进行压缩，webpack原本只能处理js,json文件，但通过添加loader可以处理其他资源。

入门小demo

npm init -y
npm install webpack webpack-cli --save-dev

安装完成依赖之后，添加html, js文件，内容自定，此处添加了moment.js库，仅仅为了测试。

import moment from 'moment';

function add(x, y) {
    return x + y
}

console.log(add(1, 2))
console.log(moment().format())

在package.json中添加以下scripts（学习使用，实际不用添加这些命令，根据自己需求自己编写）

"scripts": {
    "build": "webpack",
    "build-dev": "webpack ./src/index.js -o ./dist --mode=development",
    "build-pro": "webpack ./src/index.js -o ./dist --mode=production"
}

可以通过以下指令来运行：

npx webpack --mode=development
npm run build
npm run build-dev
npm run build-pro

1. 有关npx命令，如果想要调用项目内部模块，只能在项目脚本和 package.json 的scripts字段里面， 如果想在命令行下调用，必须像这样：$ node-modules/.bin/mocha --version，去node_modules目录下取得模块，为了方便，npx命令会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。因此在本例子中npx webpack命令相当于npm run build，二者是等效的。
   a. 有关webpack命令行命令的文档，参考链接
   b. 有关npx命令，知识参考链接
2. 有关npm命令，其scripts脚本原理相当于将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。因此第二个语句可以直接用webpack命令进行运行。有关npm知识参考链接
   a. 如果有config文件，命令会默认执行config文件
3. 第3个和第4个命令相当于先指定了入口文件，-o指定了输出位置，最后指定了mode

管理资源

有关loader的详细配置，参考官网文档介绍

打包CSS

基础演示，更详细参考官网。
在之前demo的基础上进行，随便添加一个css文件，并在js文件中import'./home.css'导入，然后通过webpack.config.js配置loader以支持css（假如要支持less等其他添加不同loader）
【注】：要先通过npm安装相关loader，后面不再重复(–save-dev)

const path = require('path');

module.exports = {
    // 入口起点
    entry: './src/index.js',
    output: {
        // 输出文件名
        filename: 'build.js',
        // 输出路径，__dirname nodejs变量，代表当前文件(webpack.config.js)的目录绝对路径
        path: path.resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            {
                // 匹配哪些文件，表示以css结尾的文件，正则表达式不要加上引号
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    mode: 'development'
}

注意这里，use里面数组逆序执行，要确保style-loader在前，css-loader在后。因为在webpack中，css-loader先执行，用于解析css，然后执行style-loader，将样式添加到DOM中。
然后打包即可

有关其他资源参考官网（很详细）

管理输出

使用plugin

假如需要打包后自动生成一个HTML，将其他资源自动引入到其中，需要HtmlWebpackPlugin插件，通过npm安装之后，在配置文件中添加：

  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出',
    }),
  ],

开发环境

devServer

配置devServer，热编译，在修改文件后不用每次手动编译，自动编译，生成文件在内存中，不会输出。

// 配置devServer
devServer: {
  static: {
    directory: path.join(__dirname, 'build')
  },
  compress: true,
  port: 9000
},

详情配置参考链接

CSS单独文件

MiniCssExtractPlugin该插件可以将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

PostCSS

详细介绍参考官网，可以用于编译尚未被浏览器广泛支持的先进的 CSS 语法。
在webpack中使用：
npm install -D postcss postcss-loader postcss-preset-env
webpack配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};