1.webpack可以把以指定入口的一系列相互依賴的模塊打包成一個(gè)文件，這里的模塊指的不只是js，也可以是css；

2.樣式引入兩種方法（這兩種方法都需要配置響應(yīng)的loader）：

（1）、在引入css時(shí)贯被，在最后生成的js文件中進(jìn)行處理，動(dòng)態(tài)創(chuàng)建style標(biāo)簽妆艘，塞到head標(biāo)簽里彤灶；

?（2）、打包時(shí)把css文件拆出來批旺，css相關(guān)模塊最終打包到一個(gè)指定的css文件中幌陕，我們手動(dòng)用link標(biāo)簽去引入這個(gè)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是一個(gè)數(shù)組鞋囊，其中的元素是我們使用的所有l(wèi)oader止后，每個(gè)loader對(duì)應(yīng)一個(gè)object，test是加載器要匹配的文件后綴正則溜腐，!”用來分隔不同的加載器译株。上述loader配置表示，webpack在打包過程中挺益，遇到后綴為css的文件歉糜，就會(huì)使用style-loader和css-loader去加載這個(gè)文件。上面的loader配置是webpack1的寫法望众，對(duì)應(yīng)的webpack2寫法如下（建議用webpack2）

? ? ?rules:?[ ?{ ?

? ? ? ? ? ? ? ?test:?/\.css$/, ?

? ? ? ? ? ? ? ? use:?['style-loader',?'css-loader']??

????????????}拾氓，{ ?

? ? ? ? ? ? ? ?test:?/\.less$/, ?

? ? ? ? ? ? ? ? use:?['style-loader',?'css-loader']??

? } ] ?

注：1.遇到后綴為.css的文件业扒，webpack先用css-loader加載器去解析這個(gè)文件淮阐，遇到“@import”等語句就將相應(yīng)樣式文件引入（所以如果沒有css-loader承匣，就沒法解析這類語句）错负，最后計(jì)算完的css剖笙，將會(huì)使用style-loader生成一個(gè)內(nèi)容為最終解析完的css代碼的style標(biāo)簽臭蚁，放到head標(biāo)簽里邮偎。

? ? ? ?2.loader是有順序的瞧捌，webpack肯定是先將所有css模塊依賴解析完得到計(jì)算結(jié)果再創(chuàng)建style標(biāo)簽棵里。因此應(yīng)該把style-loader放在css-loader的前面（webpack loader的執(zhí)行順序是從右到左）润文。

4、第二種樣式樣式引入的方法：

extract-text-webpack-plugin該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯(cuò)亂的現(xiàn)象;首先我先來介紹下這個(gè)插件的安裝方法:

? ? （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中引入樣式：