webpack4入门操作
基于webpack4实践：
开始：打开控制面板，新建一个文件，进入该文件 -初始化package.json
$ mkdir tmp/webpack-demo $ cd webpack-demo $ npm init -y
打开文件，下面多出一个package.json的文件：
接着在webpage-demo文件下，安装webpack,查看webpack版本
npm install -D webpack npx webpack --version
在webpack4 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，除了webpack 外，我们还需要安装 webpack-cli：
npm install -D webpack-cli
现在直接执行
webpack
出现如下错误:
- 原因在于：没有设定 mode，这是 webpack 4 引入的，有俩种模式，development 与 production，默认为 production
- 入口模块不存在 - webpack 4 默认从项目根目录下的 ./src/index.js 中加载入口模块，所以我们或者新建一个 src/index.js 文件，或者指定一个入口文件
安装lodash
npm install --save lodash
我们新建一个src/index.js 参照官网操作：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());然后我们新建一个./dist/index.html文件
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>执行npx webpack，
此时dist文件夹下会出现mian.js文件
你的输出可能会有所不同，但如果构建成功，那么你很好。另外，不要担心警告，我们稍后会解决。
打开dist/index.html在浏览器中打开，如果一切顺利，您应该看到以下文本：
'Hello webpack'。
目前，文件目录结构
模块
从版本4开始，webpack不需要任何配置，但大多数项目都需要更复杂的设置，这就是webpack支持配置文件的原因。这比在终端中手动输入许多命令更有效率，因此我们创建一个替换上面使用的CLI行选项：
在项目下新建一个webpack.config.js文件写入
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};现在，让我们再次运行构建，而是使用我们的新配置文件
npx webpack --config webpack.config.js
此时dist文档下出现一个bundle.js的文件,修改dist/index.html 改成引入bundle.js
<script src="bundle.js"></script>
浏览器中打开index.html，仍可以出现文本：'Hello webpack'。
配置文件比简单的CLI使用更灵活。我们可以用这种方式指定加载器规则，插件，解析选项和许多其他增强。请参阅配置文档了解更多信息。
npm
由于从CLI运行webpack的本地副本并不是特别有趣，我们可以设置一个小捷径。让我们通过添加一个npm脚本 调整我们的package.json：
控制台执行：
npm run build
现在该npm run build命令可以用来代替npx我们之前使用的命令。
自定义参数可以通过在npm run build命令和参数之间添加两个破折号传递给webpack ，例如npm run build -- --colors。
下一步目标：查看基本概念和配置页面。此外，API部分深入了webpack提供的各种接口。