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'

                }, ],

            }

巴特西

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

最新文章

热门文章