Webpack学习笔记

1.webpack是一种前端资源构建工具，一个静态模块打包器。

2.Webpack五个核心概念

2.1入口（Entry）:指示Webpack以那个文件为入口开始打包，分析构建内部依赖图。

2.2输出（Output）:指示Webpack打包后的资源bundles输出到那里去，以及如何命名。

2.2.1

// 绝对路径需要引入node.js的核型模块path,方法叫resolve,用来处理绝对路径。
const {resolve} = require('path')
module.exports = {
    entry:'./src/index.js',
    output:{
        // 文件名
        filename: 'built.js',
        // 输出的文件路径，一般是绝对路径
        path: resolve(__dirname,'build')
    }
}

2.3Loader:让Webpack能够去处理那些非JavaScript文件（Webpack自身只理解JavaScript）。

2.4插件(Plugins):可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，直到重新定义环境中的变量等。

2.5模式(Mode)

3.Webpack运行指令。

index.js:webpack入口起点文件

3.1运行指令：

  3.1.1开发环境：webpack ./src/index.js -o ./build/built.js --mode=development

  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

  整体打包环境是开发环境
  3.1.2生产环境：webpack ./src/index.js -o ./build/built.js --mode=production

  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

  整体打包环境是生产环境

4.Webpack的配置文件，Webpack.config.js。作用：指示Webpack干那些活（当你运行webpack指令时，会加载里面的配置）。所有构建工具都是基于nodejs平台进行的，模块化默认采用commonjs。

配置style和css的Loader需要下载，指令如下
npm -i css-loader style-loader -D

5.详细loader配置。rules是个数组，在里面写一条一条的对象，每个对象就是处理一种文件类型的loader的用法。

6.plugins:下载，引入，使用。

6.1下载：

6.2引入：HtmlWebpackPlugin是个构造函数（类）；

6.3使用：

7.devServer(开发服务器)：用来自动化，自动打开浏览器，自动编译，自动刷新浏览器~~~ 使用devServer搭建一个服务器去启动这个项目。