安装方式
- 本地安装
npm install webpack webpack-cli --save-dev
- 全局安装(不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。)
npm install --global webpack webpack-cli
使用方式
进入 webpack.config.js所在目录
- cli方式
npx webpack
- 配置文件方式
npx webpack --config webpack.config.js
- NPM 脚本(NPM Scripts)方式
npm run build
webpack --watch // 监听变动并自动打包
webpack -p // 压缩混淆脚本,这个非常非常重要!
webpack -d // 生成map映射文件,告知哪些模块被最终打包到哪里了
示例DEMO
- DEMO结构(dist是构建过程产生的代码最小化和优化后的“输出”目录;src为源目录。)
- index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack Test</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
- main.js文件(cli方式输出的文件)
- bundle.js文件(其他两种方式输出的文件)
- index.js文件
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
- package.json文件
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
- webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
在项目中使用webpack步骤:
- 安装webpack
- 在项目根目录下创建一个文件: webpack.config.js
- 配置 webpack.config.js
- 执行webpack -p进行打包