阅读 71

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/
                        }
                    ]
                }
            }
复制代码
文章分类
前端
文章标签