xgqfrms-GitHub/webpack-input-value-object-length-github-gist-api.md

## webpack-input-value-object-length-github-gist-api.md

      
    Raw
  

              webpack-input-value-object-length-github-gist-api.md
            
          
    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

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