webpack_基本配置

01_基本配置

在应用webpack之前,我们需要对基本配置有一定的认识。

核心配置

1、入口文件(entry)

规定webpack从哪个文件开始打包

2、输出(output)

规定webpack 打包完的文件,输出到哪个目录,以及命名规则等

3、加载器(loader)

进一步增强webpack的功能,默认webpack只能打包JS文件,但是借助loader,可以实现对css、图片等文件的打包和压缩

4、插件(plugins)

扩展webpack的功能,让webpack变的更强大

5、模式(mode)

主要两种:

  • 开发模式:development
    • 开发代码过程中执行的命令,样式资源、字体图标、图片、html等默认不会处理
  • 生产模式:production
    • 发布代码正式版本执行的命令,支持浏览器运行

webpack配置文件

在项目根目录,创建 webpack.config.js 作为webpack的自定义配置文件

配置文件必须放在项目的更目录

配置文件在nodejs平台运行,所以语法使用nodejs语法,且模块遵循commonJS规范

[precode]

const path = require("path");

module.exports = {
entry : './src/main.js', //入口文件
output : { //出口文件
path : path.resolve(__dirname, 'dist'),
filename : 'main.js'
},
module:{
rules : [
//loader的配置
]
},
plugins : [
//插件的配置
],
mode : "development" //开发模式
}

[/precode]

设置完配置文件后,编译命令就变的简单了

[precode]npx webpack[/precode]

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>