webpack配置：css文件打包、JS壓縮打包和HTML文件發佈

1、CSS文件打包

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

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

　　二、css創建好後，須要引入到入口文件，這裏咱們引入到index.js中

import css from './css/index.css'; document.write("It works.");

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

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

//模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] },

　　五、在終端輸入 npm run server，能夠看到出來的效果有了樣式。

2、JS壓縮打包

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

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

二、而後在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服務
}

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

3、HTML文件發佈

一、把dist中的index.html複製到src目錄中，並去掉咱們引入的js

二、在webpack.config.js中引入

const htmlPlugin = require('html-webpack-plugin');

三、引入後進行安裝   npm install html-webpack-plugin --save-dev

四、在webpack.config.js中進行插件配置

plugins:[ new uglify(), new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:'./src/index.html' }) ],// 插件，多個插件，因此是數組

五、在終端中輸入webpack，進行打包，你會看到index.html文件已經被咱們打包到dist文件目錄下了，而且自動引入了js文件