項(xiàng)目準(zhǔn)備
安裝node,新建demo文件夾作為項(xiàng)目目錄新啼，在文件夾下執(zhí)行 npm init 創(chuàng)建 package.json。
package.json會包含的項(xiàng)目描述，版本號胶坠，作者，項(xiàng)目地址等等繁堡，可一直回車涵但，也可隨意發(fā)揮。
安裝webpack
打開命令行輸入npm install --save-dev webpack webpack-cli
webpack配置
在項(xiàng)目目錄下新建build文件夾帖蔓，在該文件夾下新建webpack.base.conf.js(基礎(chǔ)配置)矮瘟、webpack.dev.conf.js（開發(fā)配置）、webpack.prod.conf.js（生產(chǎn)配置）塑娇。
一般來說澈侠，基礎(chǔ)配置作為公用部分可合并到開發(fā)配置或生產(chǎn)配置當(dāng)中，可以使用webpack-merge來進(jìn)行合并埋酬。
安裝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'); //生產(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 寫入
// 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
