webpack学习笔记

首先，来个官方文档对webpack的定义：
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
webpack 的核心价值就是前端源码的打包，即将前端源码中每一个文件（无论任何类型）都当做一个 pack ，然后分析依赖，将其最终打包出线上运行的代码。

webpack 的四个核心部分：

• entry 规定入口文件，一个或者多个
• output 规定输出文件的位置
• loader 各个类型的转换工具
• plugin 打包过程中各种自定义功能的插件

那么，webpack在日常工作中，是如何配置的呢？

通常情况下，webpack的配置文件在项目内会分为：

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

分别代表公用配置，开发环境配置，线上环境配置。
接下来，将按这三个文件来讲解如何配置，部分基础知识和要点会写在注释中，要知道全部配置内容，建议查看官方文档：https://www.webpackjs.com/con...

webpack.common.js：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const srcPath = path.join(__dirname, '..', 'src')

module.exports = {
    entry: path.join(srcPath, 'index.js'),
           //以该路径下的index.js作为构建的开始进入入口起点后，
           //webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'], //使用哪个loader来处理文件
                include: srcPath,
                exclude: /node_modules/
                //test,include,exclude都是拿来匹配哪些文件需要被loader处理的，
                //优先级是exclude > include > test
            },
            {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                loader: ['style-loader', 'css-loader', 'postcss-loader'] 
                // 加了 postcss
            },
            {
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                loader: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html'
        })
    ]
}