前端自动化构建工具webpack简单入门——2

前言

继续第一篇入门的教程，本片博客主要记录我学习webpack的一些配置。我平时要上课，所以更新的比较慢，抱拳了老铁！

loaders

使用不一样的loader，webpack能够调用外部的工具，实现对不一样格式的文件进行处理。好比，less和scss处理成css。或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders能够把React的中用到的JSX文件转换为JS文件。

咱们要使用loaders，要先独立安装，再在webpack.config.js里面配置，和上面的server同样，是组件嘛。

loaders的配置有如下几个方面：

1. test——一个用以匹配loaders所处理的文件的拓展名的正则表达式（必须）
2. loaders——用以处理文件的loaders的名字（必须）
3. include/exclude——手动添加必须处理的文件（文件夹）/屏蔽不须要处理的文件（文件夹）
4. query——为loaders提供其余的设置选项

（我参考的博客里，博主将Greeter.js里面的问候语放到了一个json文件中，但并无解释为何，我想的话也许后面有用，也许是模块化思想，咱们照着作吧。）

1.在项目下 app文件夹下新增config.json文件，在里面输入：

2.再改变Greeter.js，在里面引用config.json里的文字！

（在这里注意一下，json的loaders在我这个版本已经不须要手动添加了。）

3.来啊来啊，运行啊

继续往下看，在了解如何使用loaders以前，先看一下Babel

Babel

Babel是什么？

一个编译javascript的平台

咱们为何要使用他？

有了它，你能够不用管浏览器是否支持最新的js语法（如ES6），

可使用基于js的拓展语言（如JSX）

Babel的安装与配置

1.咱们来安装一些Babel的经常使用的包（一次性，中间使用空格隔开）：

2.再在webpack.config.js中配置：

把新加入的代码贴出来，有点多，省得你们打错

module:{
        rules:[
        {
            test:/(\.jsx|\.js)$/,
            use:{
                loader:"babel-loader",
                options:{
                    presets:[
                    "env","react"
                    ]
                }
            },
            exclude:/node_modules/
        }]
    }

（我参考的这篇博客，他安装了react并用来试验，但我不想那么麻烦，这里只验证es6的语法就能测验咱们前面安装的loaders能不能起做用）

3.在app文件夹下新建Person.js

以es6的语法输入（这里为了检测es6解析能不能成功，react的解析，你们本身试试吧）：

4.修改main.js，这里只是新增来引入咱们刚刚建的Person，之前的就不动他了

如今， 运行，能够了，解析es6成功！

一切皆模块

webpack将全部的文件都当作模块来处理，我对这句话的理解就是，就是将前端的css，js，fonts等都当作单独的模块来处理。

先学习第一块

css

样式表处理工具webpack给咱们提供了两个，css-loader,style-loader，先安装

哦忘记说了，webpack会把css和js都打包到js文件中，不会生成单独的css文件，要进行一些适当配置。

如今咱们来使用

1.先在webpack.config.js里进行配置（接着在以前配置babel的module的rules里）

照例贴出代码，省得你们打错

,{
            test:/\.css$/,
            use:[
            {
                loader:"style-loader"
                },{
                    loader:"css-loader"
                    }
            ]
        }

2.在app文件夹新建一个文件main.css，再对样式进行一些调整

因为这里只是试验一下，所以咱们写简单点。给咱们的div一个背景色。

3.接着在main.js中引入它

好咱们运行一下

好了，有了一个很是sao气的背景。

上面说css也被当作一个模块来看待，再来看一下更加典型的css模块思想

css   module

这是借鉴了js的奖总体复杂的代码分解成小部分，声明到各自依赖的部分。经过css模块能将css中的类名，动画名都只做用于当前模块，避免了代码的全局污染。这是css  module的官方文档的连接

css预处理器

sass和less都是对css的拓展，可是浏览器并不能直接解析，一般咱们都须要一个工具来将sass编译为css，如今咱们使用webpack就能够完成，不须要咱们手动去编译。

想让你的css实现更多功能

这里咱们来尝试一下，为适应不一样浏览器，给css添加前缀

一、安装postcss-loader与autoprefixer

npm install --save-dev postcss-loader autoprefixer

二、接着在webpack.config.js中css版块中进行配置

{
            test:/\.css$/,
            use:[
            {
                loader:"style-loader"
                },{
                    loader:"css-loader",
                    options:{
                        modules:true
                    }
                    },{
                        loader:"postcss-loader"
                    }
            ]
        }

三、在根目录新建postcss.config.js,并添加以下语句

四、从新打包