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\'
                }, ],
            }