提取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.在项目结构中创建新的文件夹和文件来模拟动态加载
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的打包，是全部都打包到一起，还是初始化和动态化加载分开打包。这里是简单的项目结构的代码：
请大家多多指点，多多提意见，谢谢！