Webpack

webpack学习中。。。。。。

练习代码地址：

        GitHub - climber-lx/webpack

一、Webpack简介

1.1 Webpack是什么？

        Webpack 是一种前端资源构建工具，一个静态模块打包器（module bundler）。

        在Webpack看来，前端的所有资源文件（js/json/css/img/less/...）都会作为模块处理。

        它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

1.2 Webpack 五个核心概念

1.2.1 Entry

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

1.2.2 Output

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

1.2.3 Loader

        Loader 让 Webpack 能够处理那些非 javascript 文件（webpack 自身只理解 javascript）。

1.2.4 Plugins

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

1.2.5 Mode

        模式（Mode）指示 Webpack 使用相应模式的配置。

选项	描述	特点
development	会将 process.env.NODE_ENV 的值设置为 development。 启用 NamedChunkPlugin 和 NameModulesPlugin	能让代码本地调试运行的环境
production	会将 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 UglifyJsPlugin.	能让代码优化上线运行的环境

二、Webpack 的初体验

2.1 下载安装webpack

下载安装全局的 webpack 和 webpack-cli

        npm install webpack webpack-cli -g

        为了保证可以 运行 webpack命令。

下载安装项目的 webpack 和 webpack-cli （webpack 是开发依赖，不是运行依赖）

        npm install webpack webpack-cli -D      （-D 开发环境中）

查看webpack版本：

        

2.2 简单的使用 

index.js: webpack 入口起点文件

1.运行指令：

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

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

                整体打包环境，是开发环境

        生产环境： webpack ./src/index.js -o ./build --mode=production

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

                整体打包环境，是生产环境

2. 结论：

        1）.webpack 能处理 js/ json 资源，不能处理 css/img 等其他资源

        2）.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

        3）.生产环境比开发环境多一个压缩js代码   

三、打包样式资源 

3.1 使用webpack配置文件 

webpack.config.js webpack的配置文件

作用：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

所有构建工具都是基于 nodejs 平台运行的~ 模块化默认采用 commonjs

执行命令：

        webpack

3.2 webpack配置文件的基本内容 

/*
    webpack.config.js   webpack的配置文件
        作用：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置

        所有构建工具都是基于  nodejs 平台运行的~ 模块化默认采用 commonjs
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
    // webpack 配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'build.js',
        // 输出路径
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            // 详细loader配置
            // 不同的文件配置不同的loader
        ]
    },
    // plugins 的配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式  开发模式和生产模式只能存在一个
    mode: 'development',
    // mode: 'production'
}

3.3 打包css 样式资源

添加使用 'style-loader'  和 'css-loader'， 使用之前必须下载才能使用。

安装 'style-loader'  和 'css-loader'：

        npm i style-loader css-loader -D

// loader配置
module: {
    rules: [
        // 详细loader配置
        {
            // 匹配哪些文件  正则
            test: /\.css$/,
            // 使用哪些 loader 进行处理
            use: [
                // use 数组中loader执行顺序：从左到右，从上到下 依次执行
                // 创建style标签，将js中的样式资源插入进行，添加到head中生效