項(xiàng)目準(zhǔn)備

安裝node,新建demo文件夾作為項(xiàng)目目錄，在文件夾下執(zhí)行 npm init 創(chuàng)建 package.json。

package.json會(huì)包含的項(xiàng)目描述，版本號(hào)，作者，項(xiàng)目地址等等，可一直回車，也可隨意發(fā)揮。

安裝webpack

打開(kāi)命令行輸入npm install --save-dev webpack webpack-cli

webpack配置

在項(xiàng)目目錄下新建build文件夾，在該文件夾下新建webpack.base.conf.js(基礎(chǔ)配置)、webpack.dev.conf.js（開(kāi)發(fā)配置）、webpack.prod.conf.js（生產(chǎn)配置）。

一般來(lái)說(shuō)，基礎(chǔ)配置作為公用部分可合并到開(kāi)發(fā)配置或生產(chǎn)配置當(dāng)中，可以使用webpack-merge來(lái)進(jìn)行合并。

安裝webpack-merge：npm install --save-dev webpack-merge

在webpack.base.conf.js寫(xiě)入

// webpack.base.conf.js
const path = require('path');
const DIST_PATH = path.resolve(__dirname, '../dist'); //生產(chǎn)目錄
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 寫(xiě)入

// 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
當(dāng)前目錄結(jié)構(gòu)

image