可能也是因为最近比较闲，所以才有功夫来看了下外国的webpack文档以及社区。
webpack官网
因为webpack4和之前的版本有所区别所以我这里只是介绍下webpack4.x版本了。
- 首先，我们需要创建一个文件夹，我这里命名是ceshi3。
-
这个文件夹下，我创建一个src文件夹用来存放打包前的代码。创建一个dist来存放打包之后的代码。创建一个config来存放webpack配置代码。
创建文件夹 - 接下来我们通过npm 安装 webpack、webpack-cli、webpack-dev-server这三个插件。
- 然后我们在config文件夹下创建一个文件名为webpack.dev.js来配置webpack。我们先在src下创建一个main.js。让这个js文件作为入口文件。
- 我们随便在main.js文件中写一个函数。然后我们开始写webpack.dev.js。首先我们引入node的path模块，然后配置入口和mode以及出口，这三个是必须的。代码如下：
const path = require("path");
module.exports = {
entry: {
main: "./src/main.js"
},
mode: "development",//development（开发模式）和production（生产模式）
output: {
filename: "[name]-bundle.js",
path: path.resolve(__dirname,"../dist"),
publicPath: "/"
}
};
然后我们后台执行
webpack --config=config/webpack.dev.js
接下来我们就会发现打包成功，在dist文件夹中出现一个main-bundle.js
打包成功
其实块我一般是为了方便起见，我会把后台执行的那行代码写到package.json文件中。
{
"dependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7"
},
"scripts": {
"build": "webpack --config=config/webpack.dev.js"
}
}
这样我们就可以直接在控制台输入
cnpm run build
这样就可以了。
