webpack4.x配置指南

WebPack4.X配置指南

一、简介

（一）WebPack简介
Webpack是一个前端自动化打包工具，根据它的名字也很好理解，web-pack顾名思义就是前端打包工具，它是基于Node和NPM的，所以在安装使用webpack之前，需要安装nodejs，nodejs的版本过低也不行，所以推荐安装nodejs版本为v8.11.2以上，npm版本为v5.6.0以上。

二、项目建立
（一）项目建立
第一步：新建一个文件夹，命名为mywebpack;
第二步：在cmd命令框中使用cd命令切换到mywebpack目录中，输入npm init或npm init -y,创建package.json文件，需要注意的是如果package.json的名称为webpack可能会报错。
第三步：将mywebpack文件夹插入到VSCode等编辑工具中，并在mywebpack根目录下新建一个webpack.config.js文件。

关于webpack.config.js中常见配置项的说明如下：

先做一个默认配置，如下：

const path = require(‘path’);

module.exports = {
entry: path.resolve(__dirname, ‘./src/app.js’), //入口文件
output: {
path: path.resolve(__dirname, ‘./dest’), //打包后的目录
filename: ‘dabao.js’ //打包后的文件名称
}
}
注：可以将上面的配置项拷贝到你的webpack.config.js文件中。

第四步：在第三步中的配置内容需要注意两个文件及一个路径：
entry: path.resolve(__dirname, ‘./src/app.js’)
path: path.resolve(__dirname, ‘./dest’)
filename: ‘dabao.js’

path: path.resolve(__dirname, ‘./dest’)及filename: 'dabao.js’这两个配置项的意思是webpack打包完成后会在mywebpack项目根目录中自动创建dest目录，dest目录中自动创建dabao.js文件；

entry: path.resolve(__dirname, ‘./src/app.js’)是需要你在mywebpack项目根目录创建一个src文件夹,然后在src文件夹中创建一个app.js、m1.js、stu.json文件。

要打包的目录结构及代码如下：

第五步：使用webpack打包第四步中的内容则需要使用npm安装webpack和webpack-cli,在cmd命令框中输入：
npm install webpack@4 webpack-cli -g

第六步：
1、在mywebpack项目根目录下新建src目录，在src目录中新建m1.js文件，m1.js文件内容如下：
exports.xingming = ‘lisi’;
module.exports.age = 20;
module.exports.fn = function() {
console.log(‘fn在m1.js文件’);
}
2、在mywebpack项目根目录下新建src目录，在src目录中新建stu.json文件，stu.json文件内容如下：
{ “age”: 21, “usr”: “lisi” }

3、在mywebpack项目根目录下新建src目录，在src目录中新建app.js文件，app.js文件内容如下：
let m1 = require(’./m1.js’);
console.log(m1);
let stus = require(’./stu.json’);
console.log(stus);

在命令行终端中执行webpack命令:

在命令行终端中执行完webpack命令后，就会在myapp项目根目录中创建一个dest文件夹，并在dest文件夹新建一个dabao.js文件，如下：

注：打包之后