1.安装
新建一个文件夹如webpack-demo，使用npm init 命令可以自动创建这个package.json文件,这是一个标准的npm说明文件，里面包含许多信息，包括当前项目的依赖模块，自定义的脚本任务等等。
为了方便也可以使用 npm init -y
2. 安装webpack
2种选其中一个（推荐本地安装）
全局安装
npm install -g webpack
本地安装
npm install webpack webpack-cli --save-dev
-dev代表安装在开发环境
如果出现报错，可以直接选择安装具体的版本，比如npm install --save-dev webpack@3.8.1
3. 开始
现在我们的webpack-demo文件夹会有node_module这个文件和package.json文件。
我们在当前目录下新增index.html文件，src文件夹，并在src文件夹中增加index.js，得到下面这个文件目录
webpack-demo文件夹
|- /node_module
|- package.json
+ |- /dist
|- index.html
+ |- /src
+ |- index.js
dist/index.html内容如下
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
src/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());`
4.把本地 src/index.js 打包成 dist/bundle.js
通过命令./node_modules/.bin/webpack 入口路径 打包路径
比如：./node_modules/.bin/webpack src/index.js dist/bundle.js
webpack 打包.jpg
那么问题来了，如果文件很多这样打包，命令行是不是显得特别繁琐。所以我们可以通过
配置文件的方式来打包，把入口文件和打包路径写在webpack.config.js文件中.
5 webpack.config.js配置文件
在当前目录下新建一个webpack.config.js文件。
webpack.config.js文件内容
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist') //打包后的地址
}
};
6 NPM Script
虽然文件名这个比较问题解决了，但是.node_module/.bin/webpack其实写起来也很不方便，所以我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
打开package.json文件：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" //npm script 会自己去找node_module下面的webpack，所以可以简写为webpack
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
现在，可以使用 npm run build 命令进行打包了。
打包完成之后可以使用浏览器或者服务器，打开dist/index.html
网友评论