webpack3.X 學習day3 （模塊：打包）

1.模塊：css打包

    （配置loaders）

簡單的舉幾個Loaders使用例子：

• 能夠把SASS文件的寫法轉換成CSS，而不在使用其餘轉換工具。
• 能夠把ES6或者ES7的代碼，轉換成大多瀏覽器兼容的JS代碼。
• 能夠把React中的JSX轉換成JavaScript代碼。

注意：全部的Loaders都須要在npm中單獨進行安裝，並在webpack.config.js裏進行配置。下面咱們對Loaders的配置型簡單梳理一下。

• test：用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
• use：loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，不然報錯；
• include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
• query：爲loaders提供額外的設置選項（可選）。

    打包css

    1.建立css（在src路徑下建立css文件，在文件內建立index.css）

    路徑(src/css/index.css)

body{
    background-color: red;
    color: #fff;
}

    css創建後，須要引用到入口文件中，才能夠打包到，這裏咱們引入到entry.js中

    2.引入css（在entry.js中引入）

    路徑(src/entry.js)

import css from './css/index.css';

    如圖

    

    3.npm安裝（style-loader;css-loader）

    style-loader(處理css文件中的url()等)

    安裝【cnpm install style-loader --save-dev】

    css-loader(用於將css朝如到頁面的style標籤)

    安裝【npm install --save-dev css-loader】

    安裝好後配置loaders

    4.loaders配置（webpack.config.js中配置）

    路徑(webpack.config.js)

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

    如圖

    tip:loader的還有兩種配置方法

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

//第三種 
   module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    },

    4.css打包完成

    測試一下【npm run resvers】

    tip:npm run resvers是在（package.json）配置的，在day2中，如圖

 

2.插件配置：配置JS壓縮

    tip:須要引入一個uglifyjs-webpack-plugin(JS壓縮插件，簡稱uglify)

        (雖然uglifyjs是插件，可是webpack版本里默認已經集成，不須要再次安裝)

    1.引入

    路徑(webpack.config.js)

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

    如圖

    

    2.初始化對象

    引入後在plugins配置裏new一個 uglify對象就

//plugins 用來配置插件
plugins:[
        new uglify()
    ],

    3.終端中打包【npm start】

    【npm start】是在（package.json）配置的，在day2中

    4.js壓縮打包完成

———————————————————以上是今天的學習內容——————————————

不積跬步無以致千里