"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode deveplopment",
"build": "webpack --mode production"
},
先了解两个命令:
npm run dev (开发环境输出的demo.js没有压缩),也就是这个形式的,如下图,这是平时我们写代码的形式:
npm run build (生产模式输出的demo.js压缩过) ,如下图:
7.全局安装webpack-cli
npm install --save-dev webpack-cli -g
8. 安装完成后, 输入命令 npm run dev
看到这么多错误貌似有点头疼啊!
原因是,你输入命令 npm run dev 的时候,会默认打包src文件夹下的index.js文件,打包完成后是main.js文件(放在dist),你有没有发现我们一开始安装webpack的时候并没有这个文件生成,所以更别提什么index.js文件了,所以这些我们需要手动创建
我们先创建src文件.还有一个dist文件,存放默认的打包生成的文件, 然后在src里再创建index.js文件
9.接下来,输入命令 webpack --mode deveplopment
有些人奇怪,版本号怎么变了成4.14.0了,不好意思,我中途更新了,但是不要紧.
然后看项目
这个main.js文件就是执行npm run dev 后,默认把我们创建的index.js打包成了main.js,然后放在dist文件夹里了
我们看一下main.js文件,很多都是打包后给生成的代码.
然后去末尾看一下我们写的index.js被被放进去没有,从下图的代码可以看到已经包含进去了,说明我们打包成功了,为什么要做这一步呢,那当然是测试到底能不能进行打包了.
10.到这一步了,打包demo.js(不是默认的文件的时候), 黄色警告还是出现!那么应该怎么解决呢?那就是webpack的版本问题,命令不同了
应该使用如下命令进行打包:
npx webpack ./demo.js -o demo.bundle.js --mode development
很神奇吧? 黄色警告没有了!!
查看项目,可以看到已经正确打包了:
查看文件内容:
我们的代码,已经被打包在末尾:
这样,我们简单的配置就已经完成了!
然后我们尝试用一下已经打包好的文件,新建hello.html