第一步：新建并启动项目
文件目录结构如下：
.
+-- dist
| +-- index.html
+-- src
| +-- index.js
+-- package.json
在 webpack 4 中，可以无须任何配置使用。
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>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
package.json
{
"name": "webpacklearning",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "webpack",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
}
}
调整 package.json文件，以便确保我们安装包是私有的(private)，并且移除main入口。这可以防止意外发布你的代码。
安装lodash
npm install --save lodash
执行命令
npx webpack
执行的命令脚本会将 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。
Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）
运行后的，文件目录结构如下：
.
+-- dist
| +-- index.html
| +-- main.js
+-- src
| +-- index.js
+-- package.json
在浏览器中打开 index.html
浏览器中显示'Hello webpack'。
第二步：使用配置文件启动项目
新增webpack.config.js
.
+-- dist
| +-- index.html
+-- src
| +-- index.js
+-- package.json
+-- webpack.config.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
执行命令
npx webpack --config webpack.config.js
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
NPM 脚本运行项目
添加npm 脚本(npm script)
package.json
{
"name": "webpacklearning",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "webpack",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。
执行命令
npm run build