webpack中的extract-text-webpack-plugin外掛程式使用方法總結

標籤：highlight   ons   編譯   npm   load   babel   為什麼   name   說明   

為什麼要用 extract-text-webpack-plugin這個外掛程式，這個外掛程式可以為我們實現樣式模組化，並且在打包的時候可以產生一個總得css檔案。我是在react的項目中用到的。接下來怎麼用呐？

1，首先我們npm安裝 npm install extract-text-webpack-plugin --save-dev.

2，在webpack.config.js中進行配置 首先我們要引入

const ExtractTextWebpack = require("extract-text-webpack-plugin"); 關於裡邊參數的詳細說明可以看git官網https://github.com/webpack-contrib/extract-text-webpack-plugin

    module: {        loaders: [            {                test: /\.js(x)?$/,                loader: "babel-loader",                exclude: /mode_modules/            },            {                test: /\.css$/,                use: ExtractTextWebpack.extract({                    fallback: ‘style-loader‘,                    use: [‘css-loader‘],                    publicPath: path.resolve(__dirname, ‘dist‘)                })            }        ]    }

　3：我們想在編譯後看到這個檔案夾，這樣就會在我們的dist目錄下產生一個 style.css了，如果你用的是less。sass，stylus這個時候你只需要下載相應的loader然後在裡邊做相應的配置就好了

plugins: [        new HtmlWebpackPlugin({            template: path.resolve(__dirname, ‘./src/index.html‘)        }),        new ExtractTextWebpack("style.css")    ]

 

webpack中的extract-text-webpack-plugin外掛程式使用方法總結