開(kāi)發(fā)模式
1、（命令行）安裝
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
最好猛们，使用yarn 安裝（推薦）
mkdir webpack-demo && cd webpack-demo
yarn init -y
yarn add webpack webpack-cli -D
2、配置index文件
（1）yarn add lodash, （命令行）導(dǎo)入lodash。
（2）創(chuàng)建 index.html 和 ./src/index.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue項(xiàng)目初始化</title>
</head>
<body>
<script src="app.bundle.js"></script>
</body>
</html>
index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash（目前通過(guò)一個(gè) script 腳本引入）對(duì)于執(zhí)行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
3琳骡、 配置已經(jīng)生成的package.json文件
// 注意：下面兩個(gè)( dependencies,devDependencies)是yarn add安裝的插件自動(dòng)生成的，當(dāng)然讼溺，也能手動(dòng)導(dǎo)入楣号，執(zhí)行yarn install 安裝
// 注意：下面兩個(gè)是yarn add安裝的插件自動(dòng)生成的，當(dāng)然怒坯，也能手動(dòng)導(dǎo)入炫狱，執(zhí)行yarn install 安裝
{
"name": "vue-cus",
"version": "1.0.0",
"description": "",
"main": "main.js",
"author": "pzz",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --config build/webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"dependencies": {},
"devDependencies": {
"@types/lodash": "^4.14.144",
"lodash": "^4.17.15",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9"
}
}
4、創(chuàng)建build文件夾剔猿，./build/webpack.config.js 文件
const path = require('path');
module.exports = {
entry: {
app:'./src/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
5视译、導(dǎo)入插件 webpack-dev-server
yarn add webpack-dev-server -D
6、運(yùn)行
yarn run start
生產(chǎn)模式
1归敬、將webpack.config.js酷含，build文件夾重新劃分成三個(gè)文件
build
|- webpack.common.js
|- webpack.dev.js
|- webpack.prod.js
2鄙早、（命令行）安裝
yarn add webpack-merge -D
3、修改build內(nèi)的三個(gè)配置文件
webpack.common.js
const path = require('path');
module.exports = {
entry: {
app:'./src/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode:'development',
// devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
webpack.prod.js
const merge = require('webpack-merge');
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode:'production',
plugins: [
// new UglifyJSPlugin()
]
});
4第美、修改package.json文件內(nèi)的scripts
"scripts": {
"start": "webpack-dev-server --config build/webpack.common.js",
"build": "webpack --config build/webpack.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
5蝶锋、生成bundle包
yarn run build
注意：如果生產(chǎn)環(huán)境，生成build包什往，最好在打生產(chǎn)包前扳缕，清理dist文件夾下的內(nèi)容，可以使用第三方插件 clean-webpack-plugin
參考：
更加詳細(xì)别威，理解初識(shí)化配置：
webpack指南
