1.webpack可以把以指定入口的一系列相互依赖的模块打包成一个文件，这里的模块指的不只是js，也可以是css；
2.样式引入两种方法（这两种方法都需要配置响应的loader）：
（1）、在引入css时，在最后生成的js文件中进行处理，动态创建style标签，塞到head标签里；
（2）、打包时把css文件拆出来，css相关模块最终打包到一个指定的css文件中，我们手动用link标签去引入这个css文件就可以了；
3.webpack使用样式的步骤（第一种）：
（1）、安装style-loader和css-loader；
npm install --save-dev style-loader css-loader
（2）、main.js中引用用到的样式；
require('./main.css');
（3）、在webpack.config.js里配置loader
loaders: [ {
test: /\.css$/,
loader:'style-loaer!css-loader'
}， {
test: /\.less$/,
loader:'style-loaer!css-loader'
} ]
注：loaders是一个数组，其中的元素是我们使用的所有loader，每个loader对应一个object，test是加载器要匹配的文件后缀正则，!”用来分隔不同的加载器。上述loader配置表示，webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。上面的loader配置是webpack1的写法，对应的webpack2写法如下（建议用webpack2）
rules: [ {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}，{
test: /\.less$/,
use: ['style-loader', 'css-loader']
} ]
注：1.遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件，遇到“@import”等语句就将相应样式文件引入（所以如果没有css-loader，就没法解析这类语句），最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
2.loader是有顺序的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面（webpack loader的执行顺序是从右到左）。
4、第二种样式样式引入的方法：
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法:
（1） npm install extract-text-webpack-plugin --save-dev；
（2）webpack.config.js中写入
constExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
},
plugins: [newExtractTextPlugin("styles.css") ]
}
（3）、在html中引入样式：
8人点赞
作者：dayindayout
链接：https://www.jianshu.com/p/cbd3375e2575
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
