const path = require('path');//引入路径包
const HWP = require('html-webpack-plugin');//引入自动产出html包
const CWP = require('clean-webpack-plugin');//引入清除文件包
const webpack = require('webpack');//引入webpack,做热更新用
//const etwp = require('extract-text-webpack-plugin');
const mcep = require('mini-css-extract-plugin');//引入分离css包
const copywp = require('copy-webpack-plugin');//引入拷贝插件 let obj = {
/*
webpack4.0需要配置依赖:
开发依赖->mode:'development'
生产依赖->mode:'production'
*/
mode:'development',//配置开发依赖
//入口文件
entry:{
'./index.html'//目的为了解析某些指定文件,最终编译成能在浏览器运行的文件
},
//出口文件(取个名字放在build文件夹下面)
output:{
path:path.resolve(__dirname,'build'),//指定打包后的文件夹
filename:'[name].[hash:6].js'//给指定的文件名字加上6位哈希
},
//利用loader模块转换器分离css
module:{
rules:[
{
/*在根目录下找.css结尾的文件,把他们打包出来 */
test:/\.css$/,//匹配所有以.css结尾的
use:[
//使用css分离就用mini-css-extract-plugin
{
loader.mcep
},
'css-loader'//使用css-loader
]
},
//处理css中图片
{
test:/\(jpg|png|gif|svg|ttf|eot|woff|bmp)$/,
use:[
{
loader:'url-loader',
options:{
limit:4096,//图片大小
outputPath:'../images',//指定打包后的图片位置
publicPath:'/images'//原来的图片位置
}
}
]
} ]
}
//引入扩展插件
plugins:[
//清除文件插件
new CWP({
['build']//清除打包后多余的js(必须放在html文件上面)
}),
//分离css插件
new mcep({
filename:'1.css'
}),
//自动产出html插件
new HWP({
template:'./index.html'//模板文件, //对文件进行压缩
minify:{
removeAttributeQuotes:true,//去掉属性双引号
collapseWhitespace:true//将文件压缩成一行
},
/*
设置文件的title
用模板引擎配合使用,<%= htmlWebpackPlugin.options.title>
*/
title:'欢迎来到webpack4.0',
hash:true,//给产出的文件加上hash,避免缓存
//提取代码中的公共模块,然后将其打包到独立的文件中
chunks:['index','index1'] }),
//热更新插件
new webpack.HotModuleReplacementPlugin()//热更新模块
],
//配置开发服务器
devServer:{
//配置开发服务运行时文件根目录(该配置可以省略)
contentBase:path.resolve(__dirname,'build'),
host:'localhost', //服务器监听的主机地址
compress:true, //服务器是否启动压缩
port:80, //服务器监听的端口
open:true, //自动打开浏览器 可不写
hot:true//热更新,局部刷新
} }
module.exports = obj;//导出obj *** extract-text-webpack-plugin默认安装的是3.0.2不支持webpack4.0
所以使用mini-css-extract-plugin 支持webpack4.0

最新文章

  1. [vs2008]Visual Studio 2008 SP1添加或删除功能提示查找SQLSysClrTypes.msi文件
  2. linux命令(2):cd命令
  3. Xcode编译相关
  4. [BZOJ 1997][HNOI2010]Planar(2-SAT)
  5. No.012:Integer to Roman
  6. 记录使用gogs,drone搭建自动部署测试环境
  7. 【wikioi】1690 开关灯(线段树)
  8. Java垃圾回收器
  9. 4.Servlet_Form表单处理
  10. HW3.16
  11. Android开发报错系列(一),java.lang.NullPointerException,at android.widget.ListView.setupChild
  12. List转xml
  13. python 列表解析
  14. Logstash filter 插件之 grok
  15. Go语言的并发
  16. 2.12 for循环
  17. PowerDesigner的Table视图同时显示Code和Name的方法[转发]
  18. IntelliJ IDEA,酷炫插件系列,提高你的工作效率
  19. jQuery-爱奇艺图片切换
  20. python3对于时间的处理

热门文章

  1. 优步加入Linux基金会:支持开源
  2. 解决操作WordPress时提示输入FTP信息
  3. MT【53】对数平均做数列放缩
  4. windows 系统无法安装
  5. 19+ JavaScript 常用的简写技巧
  6. 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet
  7. 自学工业控制网络之路1.6-典型的现场总线介绍Interbus
  8. 自学Linux Shell9.2-基于Red Hat系统工具包存在两种方式之一:RPM包
  9. [luogu4264][USACO18FEB]Teleportation
  10. 【转】NFS服务配置与mount nfs时-o nolock的问题