初识webpack4.0

概念

webpack本质是javaScript(以下简称js)应用的静态打包工具，基本过程是在内部构建一个依赖图(dependency graph)，用于映射项目所需的每个模块，并生成对应的bundle。

模式

module.exports = {
  /* 默认是production, 可根据环境自行判断 */
  mode: isProd ? 'production' : 'development',
}

入口

入口用于指定webpack应该使用那个模块来开始构建内部的依赖图，编译找出哪些模块和库是直接还是间接有依赖关系，其默认值./src/index.js,也可通过项目的配置文件(webpack.config.js, 项目根目录处中，webpack会默认使用改文件配置)中指定入口：

module.exports = {
  mode: isProd ? 'production' : 'development',
  /* 入口可以为多个，用数组表示 */
  entry: './view/src/index.js'
}

输出

output 指定bundle文件的创建路径和命名，默认是在./dist/main.js，也可通过output字段进行自定义，如下：

const path = require('path');

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: './view/src/index.js'
  output: {
    path: path.resolve(_dirname, 'public'), // _dirname是指当前模块或文件的目录名称
    filename: '[name]-[chunkhash:8].js'
  }
}

loader

loader可以称作加载器或者资源转化器，因为webpack本身只能打包js和json的文件资源，loader就应运而生了，实质是一个函数，接受源文件作为参数，返回转换或预处理的结果，使得webpack可以正常打包，loader的使用方式有三种：

• 配置(推荐): 在webpack.config.js中配置，可全局使用
• 内联：在每个import或等同于import 的语句中显示指定loader
• CLI：在可视化终端或shell命令中指定

方式一：在配置文件中对不同后缀的文件选择不同的loader,简单如下：

const path = require('path');

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: './view/src/index.js'
  output: {
    path: path.resolve(_dirname, 'public'), // _dirname是指当前模块或文件的目录名称
    filename: '[name]-[chunkhash:8].js'
  },
/*
rules里的对象test和use属性是必须的，表示在遇到正则匹配的文件时，先用对应的 loader转换
*/
  module: {
    rules: [
       { test: /\.jsx?$/, use: 'happypack/loader' },
       { test: /\.(less|css)$/, use: [ { loader: 'css-loader }, { loader: 'less-loader' } ] },
    ]
  }
}

方式二：内联表达

/* 使用 ！将不同的loader分开，每个loader都是基于当前目录解析 */
  import Styles from 'style-loader!css-loader?modules!./styles.css';

方式三： CLI

/* 同样使用 ！将不同的loader分开，表示jade文件使用jade-loader，css文件使用style-loader和css-loader */
  webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

再看一下loader的一些特性，如下

• 链式传递 ：可对资源使用流水线操作(pipeline)
• 支持同步或异步
• 可接收查询参数： 用于对loader进行传递配置
• loader会产生额外文件

plugin

plugin 是在loader不能满足需求的情况下引入的插件，实质是一个对象，可通过new操作来创建实例，用来扩展业务，而且在整个生命周期起作用，示例如下：

const path = require('path');
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: './view/src/index.js'
  output: {
    path: path.resolve(_dirname, 'public'), // _dirname是指当前模块或文件的目录名称
    filename: '[name]-[chunkhash:8].js'
  },
/*
rules里的对象test和use属性是必须的，表示在遇到正则匹配的文件时，先用对应的 loader转换
*/
  module: {
    rules: [
       { test: /\.jsx?$/, use: 'happypack/loader' },
       { test: /\.(less|css)$/,
          use: [
             { loader: 'css-loader' },
             { loader: 'less-loader' },
          ]
        },
    ],
  },
  /* html-webpack-plugin 把webpack打包的文件都自动插入到html文件中*/
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
}

plugin是具有<code>apply</code>属性的js对象，而且apply可被webpack compiler 调用，compiler对象可在整个的编译周期被访问

// 定义常量，便于在其他hook中服用
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        });
    }
}

devtool

该选项控制是否&如何生成source map，不同的值会影响构建和重新构建的速度，详细的看文档

module.exports = {
  devtool: isProd ? '' : 'source-map',
}

配置

webpack配置是标准的Node.js CommonJs模块，实质是导出一个对象的JavaScript文件，可自定义对象的属性，其中可包括：

• require() 其他文件；
• 通过require() 使用一些npm的工具函数；
• 三元表达式，操控JavaScript的表达式；
• 定义常量和变量并使用；
• 定义&执行函数，简化代码，生成配置；
  以上就是我们webpack的一些基本配置项