Webpack(二)-一一网

这是我参与更文挑战的第11天，活动详情查看：更文挑战

来啦来啦，接day10

5. output

output: 即使入口文件有多个，但是只有一个输出配置

var path = require('path')
    var baseConfig = {
        entry: {
            main: './src/index.js'
        },
        output: {
            filename: 'main.js',
            path: path.resolve('./build')
        }
    }
    module.exports = baseConfig
复制代码

如果你定义的入口文件有多个，那么我们需要使用占位符来确保输出文件的唯一性

output: {
        filename: '[name].js',
        path: path.resolve('./build')
    }
复制代码

这么少的配置，就能够让你运行一个服务器并在本地使用命令npm start或者npm run build来打包我们的代码进行发布

6. Loader

loader的作用：

1、实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js

2、转换这些文件，从而使其能够被添加到依赖图中

loader是webpack最重要的部分之一，通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理，loader需要在webpack.config.js里边单独用module进行配置，配置如下：

test: 匹配所处理文件的扩展名的正则表达式（必须）
复制代码

loader: loader的名称（必须）
复制代码

include/exclude: 手动添加处理的文件，屏蔽不需要处理的文件（可选）
复制代码

query: 为loaders提供额外的设置选项
复制代码

```
ex: 
复制代码
```

        var baseConfig = {
                    module: {
                        rules: [
                            {
                                test: /*匹配文件后缀名的正则*/,
                                use: [
                                    loader: /*loader名字*/,
                                    query: /*额外配置*/
                                ]
                            }
                        ]
                    }
                }
复制代码

要是loader工作，我们需要一个正则表达式来标识我们要修改的文件，然后有一个数组表示
我们表示我们即将使用的Loader,当然我们需要的loader需要通过npm 进行安装。例如我们需要解析less的文件，那么webpack.config.js的配置如下：

var baseConfig = {
                entry: {
                    main: './src/index.js'
                },
                output: {
                    filename: '[name].js',
                    path: path.resolve('./build')
                },
                devServer: {
                    contentBase: './src',
                    historyApiFallBack: true,
                    inline: true
                },
                module: {
                    rules: [
                        {
                            test: /\.less$/,
                            use: [
                                {loader: 'style-loader'},
                                {loader: 'css-loader'},
                                {loader: 'less-loader'}
                            ],
                            exclude: /node_modules/
                        }
                    ]
                }
            }
复制代码