webpack - notes

[CodeDreamfy]

入口文件

// 1
module.exports = {
    entry: './src/index.js'
}
// 2
module.exports = {
    entry: {
        main: './src/index.js'
    }
}
// 3
module.exports = {
    entry: {
        foo: './src/foo.js',
        bar: './src/bar.js'
    }
}
// 4
module.exports = {
    entry: {
        main: [
            './src/foo.js',
            './src/bar.js'
        ]
    }
}

loader

module: {
    //...
    rules: {
        test: /\.jsx?/,
            include: [
                path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过loader处理
            ],
            use: 'babel-loader'
    }
}

plugin

const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    plugins: [
        new UglifyPlugin()
    ]
}

除了压缩js的uglifyjs-webpack-plugin，常用的还有定义环境变量的DefinePlugin，生成css文件的ExtractTextWebpackplugin等

输出

module.exports = {
    //...
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
    // 多个入口生成不同文件
    output: {
    	filename: '[name].js',
    	path: __dirname + '/dist'
	}
	// 使用hash
	output: {
    	filename: '[name].js',
    	path: __dirname + '/dist/[hash]'
	}
}

关联html

使用插件html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //...
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

这样配置后，构建时html-webpack-plugin会为我们创建html文件，其中会引用构建出来的JS文件，实际项目中，默认创建的HTML并没有什么用，需要自己来写HTML文件，可以用过该插件传递一个写好的HTML模板。

module.exports = {
    //...
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html', //配置输出文件名与路径
            template: 'assets/index.html' //配置文件模板
        })
    ]
}

如果需要添加多个页面关联，那么实例化多个该插件，并将它们放在plugins字段数组中就可以了

构建CSS

style-loader 和 css-loader都是单独的node packgae

• css-loader 负责解析CSS代码，主要是为了处理CSS中的依赖，例如@import和url()等引用外部文件的声明；
• style-loader 会将css-loader解析的结果转变为JS代码，运行时动态插入style标签来让CSS代码生效

如果需要单独把CSS文件分离出来，我们需要使用extract-text-webpack-plugin

alpha 版本：npm install extract-text-webpack-plugin@next -D或者 yarn add extract-text-webpack-plugin@next -D

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    //...
    rules: [
        {
            test: /\.css$/,
            //因为这个插件需要干涉模块转换的内容，所以需要使用它的对应的 loader
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader'
            })
        },
        // css预处理器
        {
            test: /\.(css|less)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    'less-loader'
                ]
            })
        }
    ],
    plugins: [
        new ExtractTextPlugin('index.css')
    ]
}

处理图片文件

module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            }
        ]
    }
}

使用Babel

rules: [
    {
        test: /\.jsx?/, //支持js 和 jsx
        include: [
            path.resolve(__dirname, src), //src陌路下的才需要经过babel-loader处理
            loader: 'babel-loader'
        ]
    }
]

启动静态服务

//package.json
"scripts": {
    "start": "webpack-dev-server --mode development"
}

loader 匹配规则

loader匹配规则中有两个关键因素：匹配条件与匹配规则后的应用

匹配条件通常使用请求资源文件的绝对路径来进行匹配

规则条件配置：

• { test: ... }匹配特定条件
• { include: ... } 匹配特定路径
• { exclude: ... } 排除特定路径
• { and: [...] } 必须匹配数组中所有条件
• { or: […] } 匹配数组中任意一个条件
• { not: [...] } 排除匹配数组中的所有条件

loader 应用顺序

一个规则匹配多个loader，执行顺序是从最后配置的loader开始，一步一步往前。

如果多个loader匹配了同一个文件的话，需要明确前后顺序，webpack在rules中提供了一个enforce字段来配置当前rule的loader类型，可以配置pre或者post分别对应前置类型和后置类型的loader

所有的loader按照前置 -> 行内 -> 普通 -> 后置 的顺序执行。

rules: [
    {
        enforce: 'pre', // 指定为前置类型
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
    }
]

使用noParse

除了module.rules字段用于配置loader之外，还有module.noParse字段，可以用于配置哪些模块文件内容不需要进行解析。

使用noParse字段进行忽略的文件不能使用import、require、define等导入机制

module.exports = {
    //...
    noParse: /jquery|lodash/, //正则
    // 或者使用function
    noParse(content) {
        return /jquery|lodash/.test(content)
    }
}