一、CSS文件打包

　　1、在src下新建css文件，在css文件下新建index.css文件，輸入以下代碼

body{
    color:red;
    font-size:20px;
}

　　2、css建立好後，需要引入到入口文件，這裏我們引入到index.js中

import css from ‘./css/index.css‘;

document.write("It works.");

　　3、在終端安裝style-loader和css-loader

　　4、安裝好後，我們開始在webpack.config.js中配置module選項

//模塊：例如解讀CSS,圖片如何轉換，壓縮
 

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

　　5、在終端輸入 npm run server，可以看到出來的效果有了樣式。

二、JS壓縮打包

1、首先在webpack.config.js中引入

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

2、然後在plugins裏配置

//插件，用於生產模版和各項功能
plugins:[
    new
 
 uglify()
],//  插件，多個插件，所以是數組

const path = require(‘path‘);
const uglify = require(‘uglifyjs-webpack-plugin‘);
module.exports={
    //入口文件的配置項
    entry:{
        entry:‘./src/index.js‘
    },
    //出口文件的配置項
    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,‘dist‘),
        //輸出的文件名稱
        filename:‘
 
bundle.js‘
    },
    mode:"development",
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[‘style-loader‘,‘css-loader‘]
            }
        ]
    },
    //插件，用於生產模版和各項功能
    plugins:[
        new uglify()
    ],//  插件，多個插件，所以是數組
    //配置webpack開發服務功能
    devServer:{
        contentBase:path.resolve(__dirname,‘dist‘),//本地服務器所加載的頁面所在的目錄
        host:‘192.168.118.221‘,
        compress:true,
        port:8081
    }//  配置webpack服務
}

3、在終端輸入webpack，你會發現JS代碼已經被壓縮了

webpack配置：css文件打包和JS壓縮打包