安装Babel 7

一套东西：webpack 4.x | babel-loader 8.x | babel 7.x一起使用，先安装Babel全家桶：

npm install -D babel-loader @babel/core @babel/preset-env

然后需要使用babel-loader来处理JS文件，抄一下配置：

const path = require('path');
const ExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    //设置模式，可以是development或者production
    mode: "development",

    // 入口和输出部分
    entry: './script/index.js',
    output: {
        path: path.resolve(__dirname, "dist/script"),
        filename: "app.js"
    },

    //loader部分
    module: {
        rules: [
            {
                //匹配文件类型
                test: /\.css$/,
                //调用了新的插件的方法，这里使用了css-loader
                use: [
                    {
                        loader: ExtractPlugin.loader,
                    },
                    'css-loader'
                ]
            },

            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },

    //插件部分
    plugins: [
        new ExtractPlugin({
            filename: "[name].css"
        })
    ]
};

实验了一下箭头函数之类的，发现Babel正常工作了。如果是在命令行下直接编译文件，则Babel需要.babelrc文件，具体看Babel 7教程。

配置PostCSS

PostCss和Babel很像，也是一个loader加上很多模块化的插件，用于支持不同的CSS处理方式。在之前必须要安装css-loader和style-loader两个插件，这也是其他CSS处理插件必备的。之后要安装postcss-loader，loader系列工具都是为了Webpack准备的，如果是命令行操作，需要安装postcss库：

npm i -D postcss-loader

然后根据官网来配置Webpack。这里需要注意的是几个loader的顺序，webpack里loader的处理顺序从下到上，即在modules中最下边的loader先执行。 CSS相关处理模块的顺序是postcss-loader -> css-loader -> style-loader。这里还加了一个导出单个CSS的mini-css-extract-plugin在css-loader之后运行，由于是导出单独的CSS文件，所以也没有直接使用style-loader，所以postcss-loader要加在最下边。实际的顺序是：postcss-loader -> css-loader -> mini-css-extract-plugin

const path = require('path');
const ExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    //设置模式，可以是development或者production
    mode: "development",

    // 入口和输出部分
    entry: './script/index.js',
    output: {
        path: path.resolve(__dirname, "dist/script"),
        filename: "app.js"
    },

    //loader部分
    module: {
        rules: [
            {
                //匹配文件类型
                test: /\.css$/,
                //调用了新的插件的方法，这里使用了css-loader
                use: [
                    {
                        loader: ExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            },

            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },

    // 插件部分
    plugins: [
        new ExtractPlugin({
            filename: "[name].css"
        })
    ]
};

这里的css-loader的importLoaders配置表示在之前运行的loader数量，这里就指定了仅运行postcss-loader。现在一共使用了三个Loader。不过还没完，由于PostCSS都是模块化形式存在的，单独这么配置没有什么用。还要再项目根目录下编写postcss.config.js文件：

module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

常用的插件也都需要安装：

Precss，支持类似Sass的变量，嵌套和mixins功能。类似之前Gulp中使用的。
Autoprefixer，自动添加浏览器前缀。

npm install precss --save-dev

npm install autoprefixer --save-dev

安装正确的话，在postcss.config.js文件中点击字符串格式的插件链接，可以连接到正确的mjs文件上。然后就可以来使用以下这些特性翻译CSS看看了。这里我在添加配置的过程中，DevServer没有关闭，编写了一些新的CSS文件，和加上导入之后，浏览器里可以看到给元素添加上了没有经过任何处理的样式，完全不生效。但是重新启动DevServer之后，样式就翻译正常了。这里和Gulp不同的是：Gulp只要把变量文件放到主文件最上边导入就行了，可见文件先连接在一起，再编译。而PostCSS在处理到变量的时候就必须知道变量的值，所以在要使用变量的文件顶上必须导入变量文件。写了三个简单的例子来测试，结果OK：

<!--index.css-->
@import "main.css";

<!--main.css-->
@import "variable.css";

#app {
    text-align: center;
    color: brown;
    background-color: $mainBlack;
    max-width: calc(4*$standardwidth);
    margin-right: auto;
    margin-left: auto;
    transform: rotate(30deg);
    margin-top: 40%;

    p {
        font-size: 2rem;
        color: $mainColor;
    }
}

<!--variable.css-->
$mainColor: orange;
$mainBlack: black;
$standardwidth: 100px;

得到的输出是：

#app {
    text-align: center;
    color: brown;
    background-color: black;
    max-width: calc(4*100px);
    margin-right: auto;
    margin-left: auto;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    margin-top: 40%;
}

#app p {
    font-size: 2rem;
    color: orange;
}

PreCSS特性和自动前缀特性都正常被编译了，在>PostCSS的Github页面上可以看到很多推荐的插件。增加新插件的时候，只需要先安装该插件然后编辑postcss.config.js将插件加入到plugins对象中即可。

总结Webpack配置

Webpack本身其实相当复杂，尤其用于大型环境。不过对于个人开发，搭建好处理JS和CSS的环境还是不难的。相比Gulp，应该说还是Webpack更加方便一些。这里简要总结一下搭建环境的顺序：

在项目目录下执行npm init，变成一个项目目录。
局部安装Webpack和Webpack-cli
```
npm i -D webpack
```
```
npm i -D webpack-cli
```
配置Webpack的入口和起点
常见是生成独立CSS文件，需要安装mini-css-extract-plugin和css-loader

安装Babel全家桶：

npm install -D babel-loader @babel/core @babel/preset-env

配置Babel-loader

安装PostCss以及插件：

npm i -D postcss-loader

npm install precss --save-dev

npm install autoprefixer --save-dev

创建postcss.config.js文件，加入插件内容。
在Webpack配置文件中配置PostCSS的Loader和之前生成独立CSS文件的插件。
安装和启动DevServer即可。