[转载] Webpack 入门 --- Part II

最新推荐文章于 2019-06-04 11:41:25 发布

forfan06

最新推荐文章于 2019-06-04 11:41:25 发布

阅读量184

点赞数

分类专栏：前端之路

前端之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

https://segmentfault.com/a/1190000006178770

Loaders

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件处理。比如说分析转换scss为css，或者把下一代的JS文件（ES6、ES7）转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React中用到的JSX文件转换为JS文件。
Loaders需要单独安装并且需要在webpack.config.js配置文件中的modules关键字下进行配置，Loaders的配置包括以下几个方面：

test: 一个用以匹配loaders所处理文件的扩展名的正则表达式（必须项）
loader: loader的名称（必须项）
include/exclude: 手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选项）
query: 为loaders提供额外的设置想选（可选项）

不过在配置loader之前，我们把Greeter.js里的问候消息放在一个单独的JSON文件里，并通过合适的配置使Greeter.js可以读取该JSON文件的值，各文件修改后的代码如下：
在src文件夹中创建带有问候消息的JSON文件（命名为config.json）

{
    "greetText": "Hi there and greetings from JSON !!!"
}

更新后的Greeter.js

var config = require('./config.json');
module.exports = {
    var greet = document.createElement('div');
    greet.textContent = config.greetText;
    return greet;
};

NOTE: 由于webpack3.*/webpack2.*已经内置可处理JSON文件，这里我们无需再添加webpack1.*需要的json-loader。在看如何具体使用loader之前我们先看看Babel是什么？

Babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

使用最新的JavaScript代码（ES6、ES7 ...），而不用管新标准是否被当前浏览器完全支持
使用基于JavaScript进行了拓展的语言，比如React的JSX

Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于成为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的报（用的最多的是解析ES6的babel-env-preset包和解析JSX的babel-preset-react包）
我们先来一次性安装这些依赖包
---------------------------------------------------------------------------------------------------------------------------------
versions of babel-core and babel-loader should be consistent, will pop up "Error: Cannot find module '@babel/core'" if they do not match with each other.
---------------------------------------------------------------------------------------------------------------------------------

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法如下：

module.exports = {
    entry: __dirname + "/src/main.js",  //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",  // 打包后的输出文件存放的路径
        filename: "bundle.js"  // 打包后输出文件的文件名
    },
    devtool: "eval-source-map",
    devServer: {
        contentBase: "./public",   // 本地服务器所加载页面所在的目录
        historyApiFallback: true, // 不跳转
        inline: true  // 实时刷新
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [ "env", "react" ]
                }
            },
            exclude: /node_modules/
        }]
    }
}

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。
继续用上面的例子进行测试，不过这次我们会使用React，记得先安装React和React-DOM

npm install --save-dev react react-dom

接下来我们使用ES6的语法，更新Greeter.js并返回一个React组件

// Greeter.js
import React, {Component} from 'react';
import config from './config.json';
class Greeter extends Component {
    render() {
        return (
            <div>
                {config.greetText}
            </div>
        );
    }
}

export default Greeter

修改main.js文件，使用ES6的模块定义和渲染Greeter模块

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

重新使用npm start打包，如果之前打开的本地服务器没有关闭，你应该可以在localhost:8080下看到与之前一样的内容，这说明react和es6被正常打包了。

Babel的配置

Babel其实完全可以在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太冗余，因此一般把babel的配置选项放在一个单独的名为”.babelrc“的配置文件中。
我们提取出相关部分，分两个配置文件进行配置（webpac会自动调用.babelrc里的babel配置选项），如下：

// webpack.config.js
module.exports = {
    entry: __dirname + "/src/main.js", // 
    output: {
        path: __dirname + "/public", // 
        filename: "bundle.js"   //            
    },
    devtool: "eval-source-map",
    devServer: {
        contentBase: "./public", // 
        historyApiFallback: true,  // 
        inline: true    // 
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }]
    }
};

// .babelrc
{
    "presets": [ "react", "env" ]
}

到目前为止，我们已经知道了，对于模块，webpack能提供非常强大的处理功能。
那么哪些是模块呢？？？？？？

一切皆模块

webpack有一个不可不说的有点，它把所有的文件都当作模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理

CSS

webpack提供两个工具处理样式表，css-loader和style-loader，二者处理的任务不同：

css-loader使你能够使用类似@import和url(...)的方法实现require()的功能，
style-loader将所有的计算后的样式加入到页面中

二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。继续上面的例子：

// 安装
npm install --save-dev style-loader css-loader

// 使用
module.exports = {
    // ...
    module: {
        rules: [{
            test:/(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
        }]
    }
};

NOTE: 请注意这里对同一个文件引入多个loader的方法
接下来，在src文件夹中创建一个名字为”main.css“的文件，对一些元素设置样式

/* main.css */
html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;       
}
*， *:before, *:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    font-family: 'Helvetica Neue', Hevetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
}

我们这里例子中用到的webpack只有单一的入口，其他的模块需要通过import，require，url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js“中，如下：

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

import './main.css'; // 使用require导入css文件

render(<Greeter />, document.getElementById('root'));

NOTE: 通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的 webpack也可以把css打包为单独的文件的。
上面的代码说明webpack是怎么把css当作模块看待的。

CSS module

被称为CSS module的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用域当前模块。webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单的配置即可，然后就可以直接把CSS的类名传递到组建的代码中，这样做有效避免了全部污染。具体代码如下：

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]'  // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};

我们在src文件夹下创建一个Greeter.css文件来测试以下：

/* Greeter.css */
.root {
    background-color: #eee;
    padding: 10px;
    border: 3px solid #ccc;
}

导入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';    // 导入
class Greeter extends Component {
    render() {
        return (
            <div className={style.root}>   // 使用cssModule添加类名的方法
                {config.greetText}
            </div>
        );
    }
}

export default Greeter

CSS预处理器

Sass和Less之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables，nesting， mixins， inheritance等不存在与CSS中的特性来写CSS，CSS预处理器可以将这些特殊类型的语句转化为浏览器可识别的CSS语句。
以下是常用的CSS处理loaders：
Less Loader
Sass Loader
Stylus Loader
不过其实也存在一个CSS的处理平台-PostCSS，它可以帮助CSS实现更多的功能。
举例来说明如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
首先，安装postcss-loader和autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-load autoprefixer

接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js，并添加如下代码之后，重新使用npm start打包时，css就会自动根据Can i use里的数据添加不同前缀了。

// webpack.config.js
module.exports = {
    // ..
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}


// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer');
    ]
}

以上，我们已经谈论了处理JS的babel和处理CSS的PostCSS的基本用法，它们其实也是两个单独的平台，配合webpack可以很好的发挥它们的作用。接下来介绍webpack中另外一个非常重要的功能： Plugins