webpack打包教程（一）常用loader详解

1、打包图片

     //     {
            //     test: /.(png|jpe?g|gif)$/i,
            //     use: [{
            //         loader: 'file-loader',
            //         options: {
            //             name: '[name].[ext]',
            //         },
            //     }, ],
            // }, 

打包文件用的。

占位符的这种思维可以作为我们软件架构的一部分。

2、打包图片的另一种方式

 {
                test: /.(png|jpe?g|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        limit: 2048
                    },
                }, ],
            }

limit是打包文件的大小的界限。

3、打包css文件的方式。

{
                test: /.css$/i,
                use: ['style-loader', 'css-loader'],
            }

4、打包sass,scss

首先在webpack.config.js

{
                test: /.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                    //用于形成浏览器的前缀
                    'postcss-loader'
                ],
            },

然后在跟目录下新建文件。

postcss.config.js

然后输入下面的内容

module.exports = {
    plugins: [require("autoprefixer")]
}

 其中postcss和autoprefixer的是兼容性的考虑。

5、对于两个文件有引用的情况。

{
                test: /.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                        },
                    },
                    // Compiles Sass to CSS
                    'sass-loader',
                    //用于形成浏览器的前缀
                    'postcss-loader'
                ],
            },

 6、对于字体文件的引用。

{
                test: /.(eot||ttf|woff|svg)$/i,
                use: [{
                    loader: 'file-loader'
                }, ],
            }