一、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代碼已經被壓縮了
三、HTML文件發布
1、把dist中的index.html復制到src目錄中,並去掉我們引入的js
2、在webpack.config.js中引入
const htmlPlugin = require('html-webpack-plugin');
3、引入后進行安裝 npm install html-webpack-plugin --save-dev
4、在webpack.config.js中進行插件配置
plugins:[ new uglify(), new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:'./src/index.html' }) ],// 插件,多個插件,所以是數組
5、在終端中輸入webpack,進行打包,你會看到index.html文件已經被我們打包到dist文件目錄下了,並且自動引入了js文件