走近webpack（2）--css打包及压缩js

　　前面的文章介绍了webpack的devServer以及多入口多出口文件的配置，我们继续往下学。

　　在开始学习接下来的知识以前，咱们先回顾一下，前文提到了webpack的简单配置方法，可是只详细说了下入口和出口文件的配置，并无更多的去解释其余选项的配置，好比loader，plugin等。那么我们如今就来学一下module的配置。前面说过，module的主要做用就是经过loaders来配置，解析，转换不一样类型的模块。好比说，能够把less,sass转换成css，能够把es6甚至es7语法转换成大部分浏览器能够运行的js代码。全部的loaders都须要在npm中单独安装而且在module中配置后才可使用。loader的主要配置只有test和use两种，简单来讲就是。你要匹配的文件是什么，用test来过滤。用use来肯定你要用什么loader来转换你匹配到的文件。下面我们开始第一个loader的使用。

　　首先咱们来安装两个loader,css-loader和style-loader。运行以下代码：

npm install style-loader css-loader --save-dev

　　其中，style-loader主要用于将css插入到页面的style标签中等。css-loader主要用于处理css中的url()。

　　而后咱们查看package.json中的devDependecies中多了两个配置项，也就是咱们安装的css-loader和style-loader说明安装成功。

　　

　　而后，咱们在src文件夹下新建一个css文件夹，而且新建一个index.css文件。

　　此时，你的文件目录结构应该是这样的：

　　

　　在文件中咱们写上以下的代码。

body{
   background:red; 
}
#title{
  background:orange;  
  color:blue;      
}

　　只是这样还不行，咱们须要在src/entry.js中引入这个css文件，代码以下：

import idxcss from './css/index.css'

　　最后一步，也是最重要的一步，咱们在webpack.config.js中的module中配置一下咱们已经安装好的loader：

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

　　而后，让咱们npm run build一下！打开index.html，咱们发现css已经被写入了。

　　下面咱们介绍一下loader的其余几种写法，意思都同样，大家喜欢哪一个用哪一个。

/*第一种写法*/ 
module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
}
/*第二种写法*/ 
module:{
    rules:[
        {
            test:/\.css$/,
            loader:['style-loader','css-loader']
        }
    ]    
}
/*第三种写法*/
module:{
     rules:[
        {
            test:/\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                 }
            ]
        }
    ]
}    

　　ok,下面咱们来学一下如何压缩JS，咱们须要用到uglifyjs-webpack-plugin，一个压缩JS的插件，没错，插件，plugins。那么看一下咱们如何使用他呢。

　　uglifyjs-webpack-plugin已经集成在webpack中，因此咱们不用下载安装了，直接在config.js中引入：

const uglify = require('uglifyjs-webpack-plugin');

　　而后在module的plugin选项下new一个uglify就能够了。

　　下面咱们npm run build一下就打包成功了。JS压缩一般都是用在生产环境中的。下面来看看html文件是如何打包的。

　　先把dist目录下的index.html复制到src目录下，而后把dist目录下的文件都删除。

　　html文件的打包须要用到另外一个插件，html-webpack-plugin。咱们先安装一下吧：

npm install --save-dev html-webpack-plugin

　　安装完成以后，咱们须要引入这个插件，全部的插件使用都是这三步，安装（除了webpack集成的能够省去安装这一步），引入，配置。

　　而后，咱们须要在plugins下配置一下这个插件。代码以下：

new htmlPlugin({
/*压缩文件，removeAttributeQuotes指去掉属性的双引号，目前你随便不用也行*/
    minify:{
        removeAttributeQuotes:true
    },
/*加入hash值，为了不浏览器缓存js*/
    hash:true,
/*要打包的html文件的路径及名称*/
    template:'./src/index.html'
})

　　配置完成，npm run build一下会发现dist目录下已经生成了三个文件。至此咱们就学会了打包css，压缩js和打包生成html文件。若是稍微细心一点你会发现，其实webpack主要的做用就在于loader和plugin，也正是如此，webpack才有了它多样化个性化的配置方法。下一篇文章，咱们一块儿学一下如何用webpack来处理图片。