Webpack起步：配置说明

Posted 2021-04-29 FrontEndTips

前言：关于babel的更多资料请移步

https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

核心介绍webpack的config文件，以上篇内容为例：

entry:入口文件

output:到处路劲和文件名

module:加载器，通常对不同类型文件进行预处理，js、css、jpg等，通常写法如上图这样，其中，test 属性是要匹配你要加载的类型文件；loader 所用的loader名称；exclude 排除掉的文件情况；query 为loader提供额外的选项设置。

加入css

loaders中增加一组对象如下：

之前是要安装上面2个依赖包的；之后在js文件中直接引入css文件即可，

import './main.css';

设置webpack启动命令：

build : 'webpack --watch'

html中引入js文件即可。

加入图片加载

安装file-loader；添加相关对象

{ 

    test:/\.(png | gif | jpg | svg)/,

    loader:'file-loader'

}

js中需要使用图片的话，使用import myImg from '../imgs/webpack.png'

这样会在新目录中产生特别格式名字的图片。

还有很多loaders，详细这里：https://webpack.js.org/guides/asset-management/#global-assets