关于webpack: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'
        })
    ]
}