webpack 使用
webpack,不推荐全局安装Webpack,因为会将我们项目中的Webpack锁定到指定版本,并且在使用不同的Webpack版本的项目中,可能会导致构建失败。
全局安装:执行命令webpack构建,调用的是全局的webpack
非全局安装:需要在package.json里添加一个构建脚本,设置 “script”:{“bulid”:“webpack”},执行npm run bulid命令构建
非全局安装–Webpack4版本
- npm init -y:构建package.json,-f(代表force)、-y(代表yes)
- npm i --save webpack,安装webpack
- npm i --save webpack-cli,安装webpack-cli
- 在package.json 文件增加一个构建脚本,设置 “script”:{“bulid”:“webpack”},使用命令npm run bulid
- 生成dist/main.js文件
webpack4不需要webpack.config.js文件,不需要定义入口点,将./src/index.js 作为默认值。
webpack4提供两种模式,一种是用于加速开发、减少构建时间而不考虑生成大小的开发模式,另一种是完全用于生产环境的生产模式。
//可以在package.json文件里新增两个命令
"scripts": {
"dev": "webpack --mode development", //npm run dev,打包出包含注释和格式等未压缩状态的代码
"production": "webpack --mode production" //npm run production,打包出最小的压缩生产环境代码
}
示例:
每个项目的根目录下面,一般都有一个 package.json 文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。
- dependencies 字段指定了项目运行所依赖的模块
- devDependencies 字段指定项目开发所需要的模块。
它们都指向一个对象,该对象的各个成员,分别由模块名和对应的版本要求组成,表示依赖的模块及其版本范围。
entry point选项可以改成开发者所期待的入口文件 比如app.js
webpack提示Cannot read property ‘properties’ of undefined错误
出现这个错误是因为webpack-cli版本的问题,升级到3.1.1版本或更新即可。
npm i [email protected] -D