开发模式
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, （命令行）导入lodash。
（2）创建 index.html 和 ./src/index.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue项目初始化</title>
</head>
<body>
<script src="app.bundle.js"></script>
</body>
</html>
index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
3、 配置已经生成的package.json文件
// 注意：下面两个( dependencies,devDependencies)是yarn add安装的插件自动生成的，当然，也能手动导入，执行yarn install 安装
// 注意：下面两个是yarn add安装的插件自动生成的，当然，也能手动导入，执行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、创建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、导入插件 webpack-dev-server
yarn add webpack-dev-server -D
6、运行
yarn run start
生产模式
1、将webpack.config.js，build文件夹重新划分成三个文件
build
|- webpack.common.js
|- webpack.dev.js
|- webpack.prod.js
2、（命令行）安装
yarn add webpack-merge -D
3、修改build内的三个配置文件
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文件内的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
注意：如果生产环境，生成build包，最好在打生产包前，清理dist文件夹下的内容，可以使用第三方插件 clean-webpack-plugin
参考：
更加详细，理解初识化配置：
webpack指南
网友评论