webpack 打包工具的学习2-配置文件的使用

1.采用webpack是需要一个配置文件去进行配置的

Webpack的默认配置文件名称为webpack.config.js

配置文件内容

配置文件名

在package.json当中

注意这里的 –config 配置文件路径,指定配置文件

 

运行结果

 

2．Webpack中映入css样式

Run dev 后

原因是Webpack本身是不认识css文件的，所以需要个loader

所以需要安装loader并进行相应的配置loader

 

Css-loader 和style-loader在webpack中的loaders中进行配置

运行结果

浏览器效果

 

3.引入图片等文件

同理，webpack也不认识文件，所以需要个loader

这里需要两个loader

File-loader 和url-loader

先安装依赖

Url-loader的配置

文件格式

在build.js 中以base64格式存在的图片

 

 

总结：

1. webpack基础配置是

entry ：入口

output ：出口

watch ：监视

module:{

         loaders:[] 各种loader

}

 

1. loader配置规则

{

        test:/\.(jpg|png|gif|svg)$/,  正则表达式

        loader:'url-loader', 对应的loader

        options:{   loader所使用的参数

          limit:10000000

        }

}  

3.采用 –config 去指定配置文件