写在前面。
以下的配置，可以实现基础的使用，无论是在开发环境，还是生产环境。
这是第一个基础的版本，为了对 webpack4 有个比较大致的认识，以及和 4.0- 版本的区别。

webpack 的主要优势在于 code splitting(代码拆分）

1，零配置是指：

entry point(入口点) 默认为 ./src/index.js
output(输出) 默认为 ./dist/main.js
production(生产) 和 development(开发) 模式（无需为生产和开发环境创建2个单独的配置）

2，零配置介绍

在 webpack 4 中，既不必须定义 entry point(入口点) ，也不必须定义 output file(输出文件)。

它将查找 ./src/index.js 作为默认入口点。而且，它会在 ./dist/main.js 中输出模块包。

也就是说，当只配置了如下文件，并在根目录下创建了./src/index.js，运行npm run build，就会自动创建.dist/main.js

// package.json
"scripts": {
    "build": "webpack"
 },

webpack 4 引入了 production(生产) 和 development(开发) 模式。

在上面的代码运行时，还会有一个警告:

“模式”选项尚未设置。将 “mode” 选项设置为 “development” 或 “production” 以启用此环境的默认值。

更改如下:

// package.json
"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
},

再执行npm run build时，就会发现.dist/main.js中的代码都已经被压缩了（一个压缩后的 bundle）。

默认使用production mode(生产模式)时，可以开箱即用地进行各种优化。包括压缩，作用域提升，tree-shaking(按需加载) 等。

当执行npm run dev，会默认使用development mode(开发模式)针对速度进行优化，仅仅提供了一种不压缩的 bundle 。

覆盖默认 entry(入口)/output(输出)

entry(入口)被设置为./demo/src/index.js，output(输出)被设置为./demo/main.js

// package.json
"scripts": {
    "dev": "webpack --mode development ./demo/src/index.js --output ./demo/main.js",
    "build": "webpack --mode production ./demo/src/index.js --output ./demo/dist/main.js"
 },

3，Babel转译

使用默认入口和出口。

3.1 依赖项

- babel-core
    - 包含了 babel 提供的功能
- babel-loader
    - 让webpack理解 babel 的语法
- babel-preset-env
    - 包含 es2015/es2016/es2017 所有新的标准语法的解析器

npm i babel-core babel-loader babel-preset-env --save-dev

// .babelrc
{
    "presets": [
        "env"
    ]
}

3.2 此时，配置`babel-loader`有2种方法

3.2.1 使用 webpack 的配置文件

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

接着，在./src/index.js编写ES6的语法后，npm run dev就可以在./dist/main.js中查看转译后的代码。

3.2.2 使用 webpack 的配置文件

--module-bind 参数允许在命令行指定加载器（版本3已经存在了）

// package.json
"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  },

同样的，在./src/index.js编写ES6的语法后，npm run dev就可以在./dist/main.js中查看转译后的代码。

4，webpack 插件

首先解释一下插件plugin，一般关于 html,css 的插件都会用在生产环境中使用。
因为生产环境中要使用 plugin 进行文件的生成，而不是在内存里。

4.1 html的生成

webpack 需要两个额外的组件来处理HTML：html-webpack-plugin 和 html-loader。

npm i html-webpack-plugin html-loader --save-dev

这是一个webpack插件，可以简化HTML文件的创建，以便为webpack包提供服务。并且可以使用如 ejs，lodash 等模板提供的模板。

有的模板，比如jade模板，需要配置对应的loader
ejs模板需要下载依赖即可，不需要配置loader

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true } // 加载器切换到优化模式，启用压缩。
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      // 指定源文件，比如可以是html文件，或ejs文件
      template: "./src/index.html", 
      // 指定生成文件路径，和文件名（路径以出口文件，所在文件夹为基准）（默认为index.html）
      filename: "./index.html",
      // 指定生成 html 文件的 title
      title: 'myWebpack'

    })
  ]
};

// ejs模板文件，注意<title>标签，这样就可以使用指定的title
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

</body>
</html>

接下来，npm run build就可以看到在dist文件夹中生成的html文件，并且title标签也会对应。

4.2，CSS的提取

先说一点写法的差异：

在之前的版本中，会这样写，其中 “!” 用来分隔不同的loader。

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style-loaer!css-loader'
        }
    ]
}

现在大部分的写法：

module: {
    rules: [
      {
        test: /\.css$/,
        /*
        * use作用和 loader相同。
        * 数组中的元素，会顺序执行的。下面写法的会先执行 css-loader，
        * 也就是这个形式：style(css(css文件))，函数嵌套的形式
        *    css-loader，将css文件变为 js 模块文件
        *    style-loader，将生成一个内容为最终解析完的css代码的<style>标签，添加到页面的<head>标签中
        * */
        use: ['style-loader','css-loader']
      }
    ]
}

其中，use可以添加多个loader，各个loader就可以添加自己的配置项了。如下例子：

use: [
  {
    loader: "css-loader",
    options: {
      sourceMap: false,
      minimize: true
    }
  },
  {
    loader: 'postcss-loader',
    options: {
    }
  },
]

进入正题，css的提取。

webpack不知道如何提取，需要借助mini-css-extract-plugin

又看到网上说webpack要更新到4.2+的版本，该插件才会生效。但经过测试，4.16版本也可以。

npm i mini-css-extract-plugin css-loader --save-dev

// webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true } // 加载器切换到优化模式
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },

  plugins: [
    // 如果使用了html-loader，将会压缩生成的html文件
    new HtmlWebPackPlugin({
      // template: "./src/index.html", // 指定源文件，比如可以是html文件，或ejs文件
      template: "./src/index.ejs",
      filename: "index.html",  // 生成文件名（路径以出口文件，所在文件夹为基准）（默认为index.html）
      title: 'webpack'
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
    })
  ]
};

// 入口js中引入，该例中，css文件: src/main.css
import style from './main.css'

这时，在npm run build，就可以在dist文件夹下看到被打包的css

5，webpack dev server

配置开发服务器，可以实现：更改文件，自动刷新浏览器

npm i webpack-dev-server --save-dev

// package.json
// start添加启动服务器，--open表示自动打开浏览器，如果没有写，可手动以默认8080端口打开浏览器
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}

npm run start，浏览器就会打开，并且自动刷新。

webpack4基础配置