webpack4學習筆記（三）

webpack打包資源文件

　　1，打包css文件，先安裝css-loader和style-loader

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

webpack.config.js配置以下：

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

2，webpack打包sass文件，先安裝node-sass，sass-loader（還需安裝css所需的依賴）

npm install --save-dev sass-node sass-style

}

3，webpack打包less文件，先安裝less，less-loader（還需安裝css所需的依賴）

npm install --save-dev less less-style

 

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

4，提取css代碼，須要一個插件：extract-text-webpack-plugin，首先安裝此插件

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

 

 

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: {
        main: path.resolve(__dirname, 'src/main.js'),       //入口
    },
    output: {
        filename: 'bundle.js',               //輸出的文件名
        path: path.resolve(__dirname, 'build') //輸出文件所在的目錄
    },
    devServer: { // 檢測代碼變化並自動從新編譯並自動刷新瀏覽器
        contentBase: path.resolve(__dirname, 'build') // 設置靜態資源的根目錄
    },
    module: { // 如何處理項目中不一樣類型的模塊
        rules: [ // 用於規定在不一樣模塊被建立時如何處理模塊的規則數組
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: path.resolve(__dirname, 'node_modules'),
                include: path.resolve(__dirname, 'src'),
            },
            {
                test: /\.css$/,
                use:ExtractTextPlugin.extract({
                    fallback:"style-loader",
                    use:"css-loader"
                })
            },
            {
                test: /\.scss$/,
                use:ExtractTextPlugin.extract({
                    fallback:"style-loader",
                    use:[{
                        loader:"css-loader"
                    },{
                        loader:"sass-loader"
                    }]
                })
            },
            {
                test: /\.less$/,
                use:ExtractTextPlugin.extract({
                    fallback:"style-loader",
                    use:[{
                        loader:"css-loader"
                    },{
                        loader:"less-loader"
                    }]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('css/index.css')
    ]
}