webpack 4不再需要配置文件,下面来测试一下:
首先创建一个目录:test
然后使用cmd初始化
npm init -y
引入webpack4
npm i webpack --save-dev
继续引入webpack-cli
npm i webpack-cli --save-dev
这个时候我们的文件夹是这样的:
然后修改package.json,加入build脚本
"scripts":{
"build":"webpack"
}
保存并
npm run build
这个时候如果出现:
证明我们快成功了,这里说,错误:未找到空的模块,这就涉及到了webpack4中的关于“入口”的知识:
webpack 4会在./src中找entry point 入口点:
但是webpack 4不再需要配置文件,所以默认为src/index.js文件,即新建文件src/index.js:
并在js文件中写任意JS代码:
console.log(`test Webpack 4`);
然后我们再运行:
npm run build
这时,bundle包将会出现在test/dist/main.js中:
这里发现,并没有output file配置,原因和上面一样,webpack 4不再需要配置文件
这里涉及到两个模式:生产模式(production)和开发模式(development)
上面run以后我们会发现警告:
意思是:这个模式选项没有被设置,webpack降会退到生产模式,将mode选项设置为development或production以启用环境默认值。
这个时候打开package.json配置scripts:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
这个时候运行:
npm run dev
发现在开发环境下,打包成了一个bundle文件,没有被压缩
换种方式:
npm run build
再回去发现,dist/main.js就打包完成了。
production mode(生产模式) 可以开箱即用地进行各种优化。 包括压缩,作用域提升,tree-shaking 等。
development mode(开发模式)针对速度进行了优化,仅仅提供了一种不压缩的 bundle 。