上一篇已经实现了webpack的基本打包操作，但是并没有使用配置文件，而是使用 CLI 来实现打包。

配置文件

// webpack.config.js
module.exports = {
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

入口起点
单文件
module.exports = {
    entry: "./src/index.js"
}

多文件
// 对象语法
module.exports = {
    entry: {
        app: "./sec/app.js",
        vendors: "./src/vendors.js" 
    }
}

// 应用场景： 分离应用程序、和第三方库入口、多页面应用程序

// 多页面应用程序
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

出口
基本用法
// webpack.config.js
const path = require('path');
const config = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

module.exports = config;

多入口起点
//
{
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}
// 这里的[name]是占位符,之后会替换为 app、search
// 写入到硬盘：./dist/app.js, ./dist/search.js

继续之前的学习

// webpack.config.js
var path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

// 执行
$ npx webpack --config webpack.config.js
// 同样能打包OK

上面讲的比较零碎呢，看着不爽，那我们再来一个比较实用一点的demo吧

目录结构
| dist
    - index.html
| src
    - index.js
| package.json
| webpack.config.js

具体代码实现
// webpack.config.js
var path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  }
}

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="title"></div>
  <script src="./js/bundle.js"></script>
</body>
</html>

// index.js
document.getElementById('title').innerHTML = 'hello webpack';

package.json的配置尤其重要：

{
  "name": "webpack_new_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
    // "build": "webpack --config webpack.config.js --mode development"
    // 上面两种配置等价，--config webpack.config.js可以不写，默认是它。
    // webpack 4.0之后多了mode的配置，因此我们需要配置一下，不然会出现警告哦
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  }
}

运行一下：npm run build

补充：

// 按道理我们在本地安装了webpack，这部就是应该直接运行webpack 就可以打包了嘛

>$  webpack
webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路
径正确，然后再试一次。
所在位置 行:1 字符: 1
+ webpack
+ ~~~~~~~
    + CategoryInfo          : ObjectNotFound: (webpack:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

// 恰恰报错了呢


// 解决办法一
全局安装 webpack 和 webpack-cli

// 解决办法二
就是上诉我们在package.json中进行配置
"build": "webpack --mode development"

扩展一下：

webpack中常用的：

var path = require('path')

是nodejs中的path模块，介绍一下webpack中常用的几个path模块的方法：

应用node环境的时候，这个path模块的方法经常被用到，处理路径的方法。

Nodejs的path模块介绍：

网址：http://nodejs.cn/api/path.html

path 模块提供了一些工具函数，用于处理文件与目录的路径。可以通过以下方式使用：

const path = require('path');

或

var path = require('path')

Windows 与 POSIX

path 模块的默认操作会根据 Node.js 应用程序运行的操作系统的不同而变化。比如，当运行在 Windows 操作系统上时，path 模块会认为使用的是 Windows 风格的路径。

在 POSIX 上:

path.basename('C:\\temp\\myfile.html');// 返回: 'C:\\temp\\myfile.html'

在 Windows 上:

path.basename('C:\\temp\\myfile.html');// 返回: 'myfile.html'

要想在任何操作系统上处理 Windows 文件路径时获得一致的结果，可以使用 path.win32：

在 POSIX 和 Windows 上:

path.win32.basename('C:\\temp\\myfile.html');// 返回: 'myfile.html'

要想在任何操作系统上处理 POSIX 文件路径时获得一致的结果，可以使用 path.posix：

在 POSIX 和 Windows 上:

path.posix.basename('/tmp/myfile.html');// 返回: 'myfile.html'

注意：在 Windows 上 Node.js 遵循单驱动器工作目录的理念。当使用驱动器路径且不带反斜杠时就能体验到该特征。例如，fs.readdirSync('c:\\') 可能返回与 fs.readdirSync('c:') 不同的结果。

常见方法

path.join([...paths])

新增于: v0.1.16

...paths <string> 一个路径片段的序列
返回: <string>

path.join() 方法使用平台特定的分隔符把全部给定的 path 片段连接到一起，并规范化生成的路径。

长度为零的 path 片段会被忽略。如果连接后的路径字符串是一个长度为零的字符串，则返回 '.'，表示当前工作目录。

例子：

path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');// 返回: '/foo/bar/baz/asdf'

path.join('foo', {}, 'bar');// 抛出 'TypeError: Path must be a string. Received {}'

如果任一路径片段不是一个字符串，则抛出 TypeError。

path.normalize(path)

新增于: v0.1.23

path <string>
返回: <string>

path.normalize() 方法会规范化给定的 path，并解析 '..' 和 '.' 片段。

当发现多个连续的路径分隔符时（如 POSIX 上的 / 与 Windows 上的 \ 或 /），它们会被单个的路径分隔符（POSIX 上是 /，Windows 上是 \）替换。末尾的多个分隔符会被保留。

如果 path 是一个长度为零的字符串，则返回 '.'，表示当前工作目录。

例如，在 POSIX 上：

path.normalize('/foo/bar//baz/asdf/quux/..');// 返回: '/foo/bar/baz/asdf'

在 Windows 上：

path.normalize('C:\\temp\\\\foo\\bar\\..\\');// 返回: 'C:\\temp\\foo\\'

Since Windows recognizes multiple path separators, both separators will be replaced by instances of the Windows preferred separator (\):

path.win32.normalize('C:////temp\\\\/\\/\\/foo/bar');// Returns: 'C:\\temp\\foo\\bar'

如果 path 不是一个字符串，则抛出 TypeError。

path.resolve([...paths])

新增于: v0.3.4

...paths <string> 一个路径或路径片段的序列
返回: <string>

path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。

给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径。例如，给定的路径片段的序列为：/foo、/bar、baz，则调用 path.resolve('/foo', '/bar', 'baz') 会返回 /bar/baz。

如果处理完全部给定的 path 片段后还未生成一个绝对路径，则当前工作目录会被用上。

生成的路径是规范化后的，且末尾的斜杠会被删除，除非路径被解析为根目录。

长度为零的 path 片段会被忽略。

如果没有传入 path 片段，则 path.resolve() 会返回当前工作目录的绝对路径。

例子：

path.resolve('/foo/bar', './baz');// 返回: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');// 返回: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');// 如果当前工作目录为 /home/myself/node，// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'

webpack4重新梳理一下2