webpack配置：css⽂件打包、JS压缩打包和HTML⽂件发布⼀、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、安装好后，我们开始在fig.js中配置module选项
/
/模块：例如解读CSS，图⽚如何转换，压缩
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
  5、在终端输⼊ npm run server，可以看到出来的效果有了样式。
⼆、JS压缩打包
1、⾸先在fig.js中引⼊
const uglify = require('uglifyjs-webpack-plugin');
2、然后在plugins⾥配置
//插件，⽤于⽣产模版和各项功能
plugins:[
new uglify()
],//  插件，多个插件，所以是数组
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
//⼊⼝⽂件的配置项
做好的html怎么发布entry:{
entry:'./src/index.js'
},
//出⼝⽂件的配置项
output:{
//输出的路径，⽤了Node语法
solve(__dirname,'dist'),
//输出的⽂件名称
filename:'bundle.js'
},
mode:"development",
/
/模块：例如解读CSS，图⽚如何转换，压缩
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
//插件，⽤于⽣产模版和各项功能
plugins:[
new uglify()
],//  插件，多个插件，所以是数组
//配置webpack开发服务功能
devServer:{
solve(__dirname,'dist'),//本地服务器所加载的页⾯所在的⽬录
host:'192.168.118.221',
compress:true,
port:8081
}//  配置webpack服务
}
3、在终端输⼊webpack，你会发现JS代码已经被压缩了
三、HTML⽂件发布
1、把dist中的index.html复制到src⽬录中，并去掉我们引⼊的js
2、在fig.js中引⼊
const htmlPlugin = require('html-webpack-plugin');
3、引⼊后进⾏安装  npm install html-webpack-plugin --save-dev
4、在fig.js中进⾏插件配置
plugins:[
new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
],//  插件，多个插件，所以是数组
5、在终端中输⼊webpack，进⾏打包，你会看到index.html⽂件已经被我们打包到dist⽂件⽬录下了，并且⾃动引⼊了js⽂件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。