webpack 3 loaders

webpack-3-loaders.md

webpack 3 loaders

https://gist.github.com/xyzdata/5acc4a357722e9e2636009fbd6846338#gistcomment-2132937

configuration

https://webpack.js.org/configuration/

https://webpack.js.org/configuration/module/

https://webpack.js.org/concepts/loaders/

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'css-loader'
            },
            {
                test: /\.ts$/,
                use: 'ts-loader'
            }
        ]
    }
};



{
    test: /\.css$/,
    loader: 'css-loader'
}
// or equivalently
{
    test: /\.css$/,
    use: 'css-loader'
}
// or equivalently
{
    test: /\.css$/,
    use: {
        loader: 'css-loader',
        options: {
            /**/ 
        }
    }
}



{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        }, 
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        }
    ]
}


{
    test: /\.scss$/,
    use: [
        {
            loader: 'style-loader'
        }, 
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        },
        {
            loader: 'sass-loader'
        }
    ]
}

---

https://gist.github.com/xyzdata/5acc4a357722e9e2636009fbd6846338#gistcomment-2132998

https://webpack.js.org/guides/code-splitting-css/

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}




module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
}

import 'bootstrap/dist/css/bootstrap.css';

$ npm i -D  css-loader style-loader sass-loader extract-text-webpack-plugin


$ yarn add -D  css-loader style-loader sass-loader extract-text-webpack-plugin


$ npm install --save-dev css-loader style-loader sass-loader

$ npm install --save-dev extract-text-webpack-plugin

css-loader & style-loader & sass-loader

https://webpack.js.org/loaders/css-loader/

https://webpack.js.org/loaders/style-loader/

sass-loader

https://webpack.js.org/guides/asset-management/#loading-images

https://webpack.js.org/guides/asset-management/#loading-data

https://robertknight.github.io/posts/webpack-dll-plugins/

loaders

https://webpack.js.org/loaders/

https://webpack.js.org/loaders/url-loader/

https://webpack.js.org/loaders/file-loader/

https://webpack.js.org/loaders/sass-loader/

https://webpack.js.org/loaders/worker-loader/

https://webpack.js.org/loaders/json-loader/

Since webpack v2, importing of JSON files will work by default. You might still want to use this if you use a custom file extension.

由于webpack v2，导入JSON文件将默认工作。 如果您使用自定义文件扩展名，您可能仍然希望使用此选项。

https://webpack.js.org/loaders/json5-loader/

http://json5.org/

https://github.com/json5/json5

{
    foo: 'bar',
    while: true,

    this: 'is a \
multi-line string',

    // this is an inline comment
    here: 'is another', // inline comment

    /* this is a block comment
       that continues on another line */

    hex: 0xDEADbeef,
    half: .5,
    delta: +10,
    to: Infinity,   // and beyond!

    finally: 'a trailing comma',
    oh: [
        "we shouldn't forget",
        'arrays can have',
        'trailing commas too',
    ],
}

https://github.com/json5/json5/blob/master/package.json5

https://webpack.js.org/loaders/html-loader/

https://webpack.js.org/loaders/gzip-loader/

yarn add

https://yarnpkg.com/zh-Hans/docs/cli/add

https://yarnpkg.com/zh-Hans/docs/cli/install

$ yarn add

$ yarn add [--dev/-D]

$ yarn add [--peer/-P]

$ yarn add [--optional/-O]

$ yarn add [--exact/-E]

$ yarn add [--tilde/-T]

---

Contributors

https://webpack.js.org/guides/production/

---

G:\wwwRoot\learning\Front-End-Tools\Webpack\webpack2 new\webpack.config.js

webpack.config.js

https://github.com/xgqfrms/learning/blob/gh-pages/Front-End-Tools/Webpack/webpack2%20new/webpack.config.js

https://learning.xgqfrms.xyz/Front-End-Tools/Webpack/webpack2%20new/webpack.config.js

---

webpack style-loader!css-loader & input-value object-length & github gist API

https://webpack.js.org/guides/code-splitting-css/

style-loader!css-loader

    {
        test: /\.css$/,
        loader: "style-loader!css-loader"
    }

HTML5 input & get input value

https://gist.github.com/xyzdata/1d912ebf4045f9dcc0747cb761f62090

    let input_value = document.querySelector(".ant-calendar-picker-input");
    let key = input_value.getAttribute('value');
    console.log(`input_value = ${key}`);

object length

https://stackoverflow.com/a/5527037/8202629

    Object.keys(obj).length;
    Object.keys(arr).length;
    arr.length

---

    
const path = require('path');

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

const PATHS = {
    app: path.join(__dirname, 'src'),
    build: path.join(__dirname, 'dist'),
};

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8888,
        overlay: {
            errors: true,
            warnings: true
        }
    },
    entry: {
        app: PATHS.app,
    },
    output: {
        path: PATHS.build,
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: [
                    path.resolve(__dirname, "app")
                ],
                exclude: [
                    path.resolve(__dirname, "app/demo-files")
                ],
                loader: "babel-loader",
                options: {
                    presets: ["es2015"]
                }
            },
            {
                test: "/\.scss$/",
                use: ["style-loader", "style-loader", "style-loader"]
            },
            {
                test: "/\.css$/",
                use: {
                    loader: 'css-loader',
                    options: {
                        base: 2000
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            base: 2000,
                            transform: 'path/to/conditional.js',
                            attrs: {
                                id: 'id'
                            },
                            singleton: true,
                            insertAt: 'top',
                            insertAt: '#host::shadow>#root',
                            sourceMap: true,
                            convertToAbsoluteUrls: true
                        }
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'file-loader'
                    }
                ]
            },
            {
                test: /\.ts$/,
                use: 'ts-loader'
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            }, 
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            mimetype: 'image/png',
                            prefix: 'img'
                        }
                    }
                ]
            },
            {
                test: "\.html$",
                use: [
                    "htmllint-loader", 
                    {
                        loader: "html-loader",
                        options: {
                            /* ... */
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack 2/3 & HtmlWebpackPlugin',
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false,
            options: {
                context: __dirname
            }
        })
    ],
};


// 默认情况下，如果一个目录包含 index.js，入口解决了 index.js。



new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false,
    options: {
        context: __dirname
    }
}),


module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'css-loader'
            },
            {
                test: /\.ts$/,
                use: 'ts-loader'
            }
        ]
    }
};



{
    test: /\.css$/,
    loader: 'css-loader'
}
// or equivalently
{
    test: /\.css$/,
    use: 'css-loader'
}
// or equivalently
{
    test: /\.css$/,
    use: {
        loader: 'css-loader',
        options: {
            /**/ 
        }
    }
}



{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        }, 
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        }
    ]
}


{
    test: /\.scss$/,
    use: [
        {
            loader: 'style-loader'
        }, 
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        },
        {
            loader: 'sass-loader'
        }
    ]
}




module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}





module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
}



{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader',
            options: {
                base: 2000
            }
        },
        'css-loader'
    ]
}


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



{
    loader: 'style-loader'
    options: {
        transform: 'path/to/transform.js'
    }
}



// transform.js

module.exports = function(css) {
    const transformed = css.replace('.classNameA', '.classNameB');
    return transformed;
}



{
    loader: 'style-loader'
    options: {
        insertAt: 'top'
    }
}



{
    loader: 'style-loader'
    options: {
        insertAt: '#host::shadow>#root'
    }
}



{
    loader: 'style-loader'
    options: {
        singleton: true
    }
}



{
    loader: 'style-loader'
    options: {
        sourceMap: true
    }
}


{
    loader: 'style-loader'
    options: {
        sourceMap: true,
        convertToAbsoluteUrls: true
    }
}




{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        'file-loader'
    ]
}




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



{
    test: /\.(csv|tsv)$/,
    use: [
        'csv-loader'
    ]
}


{
    test: /\.xml$/,
    use: [
        'xml-loader'
    ]
}








{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192
            }
        }
    ]
}




module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                    // creates style nodes from JS strings
                },
                {
                    loader: "css-loader"
                    // translates CSS into CommonJS
                },
                {
                    loader: "sass-loader"
                    // compiles Sass to CSS
                }
            ]
        }]
    }
};



module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "sass-loader",
                    options: {
                        includePaths: ["absolute/path/a", "absolute/path/b"]
                    }
                }
            ]
        }]
    }
};











module.exports = {
    devtool: "source-map", // any "source-map"-like devtool is possible
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader", 
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader", 
                    options: {
                        sourceMap: true,
                        data: "$env: " + process.env.NODE_ENV + ";"
                    }
                }
            ]
        }]
    }
};










const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: extractSass.extract({
                use: [
                    {
                        loader: "css-loader"
                    },{
                        loader: "sass-loader"
                    }
                ],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        extractSass
    ]
};





{
    module: {
        rules: [
            {
                test: /\.jpg$/,
                use: ["file-loader"]
            },
            {
                test: /\.png$/,
                use: ["url-loader?mimetype=image/png"]
            }
        ]
    },
    output: {
        publicPath: "http://cdn.example.com/[hash]/"
    }
}




module: {
    rules: [{
        test: /\.html$/,
        use: [
            {
                loader: 'html-loader',
                options: {
                    minimize: true
                }
            }
        ]
    }]
}




module: {
    rules: [{
        test: /\.html$/,
        use: [
            {
                loader: 'html-loader',
                options: {
                    minimize: true,
                    removeComments: false,
                    collapseWhitespace: false
                }
            }
        ],
    }]
}




var path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ["html-loader"]
            }
        ]
    },
    htmlLoader: {
        ignoreCustomFragments: [/\{\{.*?}}/],
        root: path.resolve(__dirname, 'assets'),
        attrs: ['img:src', 'link:href']
    }
};



module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ["html-loader?config=otherHtmlLoaderConfig"]
            }
        ]
    },
    otherHtmlLoaderConfig: {}
};



{
    test: /\.html$/,
    use: ['file-loader?name=[path][name].[ext]!extract-loader!html-loader']
}




module.exports = {
    module: {
        rules: [
            {
                test: /\.gz$/,
                enforce: 'pre',
                use: 'gzip-loader'
            }
        ]
    }
}

$ npm install --save-dev extract-text-webpack-plugin


$ npm i -D extract-text-webpack-plugin

$ yarn add -D extract-text-webpack-plugin