这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录
创建项目
创建项目根目录myWebpack，在根目录下创建src目录，src下创建main.js作为主入口文件，在根目录下创建package.json文件，public公共资源目录，dist打包目录。结构如下
图片1.png
package.json文件可以使用npm init指令来创建。这里我们直接手动创建，并填入下面的内容。
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": " webpack --config webpack.config.js --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {},
"dependencies": {}
}
安装webpack
首先确保使用了node的最新发布版本。然后要安装最新版本或特定版本的webpack，请运行以下命令之一，本项目使用webpack4.41.2版本
npm install --save-dev webpack
npm install --save-dev webpack@4.41.2
如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli
创建配置文件webpack.config.js
在项目根目录下创建webpack.config.js，并指定入口和输出目录
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'js/[name]-[hash].js',//打包出的脚本文件全部放进dist下的js目录
path: path.resolve(__dirname, 'dist'),//指定输出目录
publicPath:'/',//使用绝对路径
}
};
