webpack css提取（简单版）

提取css需要一个插件：
extract - loader 也就是 ExtractTextWebpackPlugin

基本实现

实现步骤：
1.安装cnpm install extract-text-webpack-plugin --save-dev
2.webpack.config.js 配置

var path = require("path");
var webpack = require("webpack");
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        "pageA": "./src/pageA.js",
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: "./dist/",
        filename: "[name].js", //初始化打包的文件名
        chunkFilename: '[name].js' //动态打包的文件名
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextWebpackPlugin.extract({ //即可以把需要的css提取出来，也可以把处理后面的css-loader
                fallback: { //不提取的时候用什么的样式加载到页面中（如果不提取出来,用什么文件处理）
                    loader: "style-loader",
                    options: {
                        singleton: true,
                    }
                },
                use: [{ //既可以把样式提取出来，又可以使用后面的loader（如果提取出来用深什么文件处理）
                    loader: "css-loader",
                    options: {
                        modules: true,
                        localIdentName: '[path][name]_[local]_[hash:base64:5]'
                    }
                }]

            })
        }]

    },
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: "[name].min.css", //规定打包后css叫什么名称
            allChunks: false //给css指定一个提取的范围，如果为true表示所有import的css都会提取出来,默认是false，只会提取初始化的css，异步加载的就认为不是初始化
        }),
    ]
}
复制代码

3.通过 ExtractTextWebpackPlugin 提取出来的文件并不会自动的加到文档中，手动的引入这个css文件，在需要的html文件中;

区分动态加载和初始化加载的css

1.在项目结构中创建新的文件夹和文件来模拟动态加载

2.将b.css引入到b.js中

import '../css/components/b.css';
复制代码

3.在入口文件引入，使用import的方法分隔一下代码：

import ( /*webpackChunkName:'b'*/ './components/b').then(
    function(b) {
        console.log(b)
    }
)
复制代码

4.注意这种方法必须使用ES6babel转译才可以使用否则会报错：

4.1先来配置一下babel,根据json文件大家安装一下需要的插件

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
复制代码

4.2 创建.babelrc文件：

{
    "presets": ["es2015"]
}
复制代码

4.3 webpack.config.js文件中module进行配置：

{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: ['es2015'],
                plugins: ['syntax-dynamic-import']
            }
        }
复制代码

4.4这样我们就可以使用import()方法在打包的时候分离代码了。
打包之后多了一个js文件，动态加载的css文件打包到这个新的js文件里面了，通过allChunks控制css的打包，是全部都打包到一起，还是初始化和动态化加载分开打包。

这里是简单的项目结构的代码：码云地址

请大家多多指点，多多提意见，谢谢！

转载于:https://juejin.im/post/5c3edc34f265da616a47e554