WebPack - CSS


css webpack


css webpack 



# npm install --save-dev css-loader style-loader



# npm install --save-dev extract-text-webpack-plugin@2



# vi webpack.config.js



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

const config = {

    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },

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

};


module.exports = config;



# vi src/index.js



<html>
    <head>
        <link rel="stylesheet" href="build/style.css" />
    </head>
    <body>
        <script src="build/bundle.js"></script>
    </body>
</html>



# vi src/index.js



import sum from './sum';
import './image_viewer';

const total = sum(10, 5);

console.log(total);



# vi src/image_viewer.js



import '../styles/image_viewer.css';

const image = document.createElement('img');
image.src = 'http://lorempixel.com/400/400';

document.body.appendChild(image);



# vi styles/image_viewer.css



img {
    border: 10px solid black;
}



# npm run build