准备工作
1.初始化项目目录:npm init -y
2.建立以下的目录结构:
--dist
--src
----index.js
--package.json(初始化后生成)
3.完成基本的webpack配置:
首先,安装基本的webpack包:
npm install --save-dev webpack webpack-cli
注:webpack4对webpack内核与cli进行了分离,故而需要分别下载webpack和webpack-cli。
接着,进行简单的webpack配置:
在根目录下创建webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
4.在package.json文件的scripts属性下配置npm脚本:
"scripts": {
...
"build": "webpack"
...
}
注:webpack进行打包最简单的命令形式是通过在script中进行编写,可以直接敲命令行进行运行,或者当node全局下安装了webpack和webpack-cli时,也可以直接通过webpack命令运行webpack(全局下的缺陷是版本固定,当开发基于不同webpack版本的项目时不适用,故而正确的开发模式是直接在项目中配置webpack,并通过script脚本命令进行运行打包)。
不通过全局webpack命令和script命令也是可以运行webpack,缺点就是很麻烦,比如我们命令行进入项目的根目录,然后输入“./node_modules/.bin/webpack”然后回车即可。
5.这个时候我们只要在终端输入npm run build就可以对src目录下的index.js文件打包,在dist目录下生成bundle.js文件。