一、创建项目
通过命令mkdir projectName
和touch fileName
创建项目和生成文件
安装
mkdir webpackDemo
切换
cd webpackDemo
二、初始化NPM
这一步是初始化npm,生成一个本地的json依赖文件,运行命令后,能够在webpackDemo下面看见一个package.json文件
npm init -y
三、安装webpack
webpack 4.x以下的版本直接安装webpack
,如果是webpack 4.x以上版本,因为4.x版本以上将webpack-cli分离出来了,所以还需要安装webpack-cli
安装
npm install webpack webpack-cli --save-dev
按照官网的意思,是不推荐全局安装的,建议本地安装,如果要全局安装也可以
npm install webpack webpack-cli -g
安装完成之后,我们会发现webpackDemo下面多个一个node_module
和package-lock.json
,其中package-lock.json是npm 5版本才有的
四、调整webpack.json
按照官方的说法执行这一步是为了确保我们的安装包是私有的,所以需要去掉main入口,新增一个private
五、运行项目
现在初始的配置基本完成,现在在项目根目录下创建一个index.js文件,在里面输入一些东西,然后运行打包文件运行,注意运行webpack
命令我们会发现webpack不是内部命令
index.js
webpack命令
所以按照官方的命令来,Node 8.2/npm 5.2.0 以上版本提供的 npx 命令,会将我们的脚本 src/index.js 作为 入口起点,也会生成 dist/main.js 作为 输出
npx webpack
我们发现运行报错了,但是即使我们不创建src
文件,也依旧可以运行,只不过我们直接运行的是目标文件
npx webapck index.js
这一次运行成功,我们发现生成了dist文件,下面有一个main.js文件,我们看一下这个js文件
我们发现我们index.js的内容被打包到这个main.js里面了,至于压缩问题,这个根据官方说明,只要是使用webpack,就会自动压缩
六、正常配置
虽然上面运行了,但是还是按照官方要求,新建一个src
文件,将index.js文件放入进去
创建
mkdir src
七、webpack配置文件
到这一步,我们创建一个webpack的配置文件:webapck.config.js
,在文件的根目录,配置文件的基本内容大致如下:
八、运行配置文件
现在我们可以通过运行配置文件来生成dist
npx webpack --config webpack.config.js
运行成功
九、配置npm scripts
每次运行项目,都输入这么一大堆东西,太麻烦,所以我们可以在package.json文件里面配置npm命令
配置好之后,我们现在就可以通过运行npm run build
命令来运行项目
其实上面的命令配置完整一些好
补充这里有一步省略了,那就是配置完config后,需要导出去,不然没有效果的
module.exports = config
"build": "webpack --config webpack.config.js"
npm run build
一切运行正常,没有报错,说明我们这个项目已经初步完成了