项目准备
安装node,新建demo文件夹作为项目目录，在文件夹下执行 npm init 创建 package.json。
package.json会包含的项目描述，版本号，作者，项目地址等等，可一直回车，也可随意发挥。
安装webpack
打开命令行输入npm install --save-dev webpack webpack-cli
webpack配置
在项目目录下新建build文件夹，在该文件夹下新建webpack.base.conf.js(基础配置)、webpack.dev.conf.js（开发配置）、webpack.prod.conf.js（生产配置）。
一般来说，基础配置作为公用部分可合并到开发配置或生产配置当中，可以使用webpack-merge来进行合并。
安装webpack-merge：npm install --save-dev webpack-merge
在webpack.base.conf.js写入
// webpack.base.conf.js
const path = require('path');
const DIST_PATH = path.resolve(__dirname, '../dist'); //生产目录
const APP_PATH = path.resolve(__dirname, '../src'); //源文件目录
module.exports = {
entry: {
app: './src/index.js', //入口文件
},
output: {
filename: 'js/[name].[hash].js',
path: DIST_PATH
},
}
在 webpack.prod.conf.js 写入
// webpack.prod.conf.js
const merge = require('webpack-merge'); //合并
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {
mode: 'production', //webpack4新增mode，"production" | "development" | "none"
});
在根目录下新建src文件夹，再到该文件夹下新建index.js作为入口文件。
根目录下新建index.html
当前目录结构
image
