const path = require('path');
// 以下文件需要npm i 文件名 --save-dev
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin"); //文件分离插件
const glob = require('glob');
const PurifyCSSPlugin = `require`("purifycss-webpack");
const copyWebpackPlugin= require("copy-webpack-plugin");
// 区分生产环境还是线上环境
// package.join 需要配置
// "scripts":{
// "dev":"set type=dev&webapck",
// "build": "set type=build&webpack"
// }
if(process.env.type=="build"){ //生产
var website ={
publicPath:"http://99.6.118.125:10090/"
}
}else{
var website ={
publicPath:"生产域名"
}
}
module.exports={
// 打包后的调试模式 这个不是必须配置项 有4种source-map eval-source-map cheap-module-eval-source-map cheap-module-source-map
devtool:'eval-source-map',
//指定打包入口文件
entry:{
// ....例如entry1可以自定义取
entery1:"./src/entery.js",
// 下面引入的第三方内库
jquery:'jquery',
vue:'vue'
},
// 指定打包出口文件
output:{
// 输出路径 node语法绝对路径
path:path.resolve(__dirname,"dist"),
// 输出文件名
filename:'[name].js',
// 处理静态文件路径问题 也有其他方法
publicPath:website.publicPath
},
// 模块：例如一些转换器css js的（最重要），例如可以将多个css文件转换成一个，减少请求次数
// 需要手动下载加载器哦npm install style-loader --save-dev
module:{
rules:[
{
test:/\.css$/,
// 不分离版本
// use:[
// {
// loader:"style-loader" ,
// options:{
// minimize:true
// }
// },
// {
// loader:"css-loader" ,
// options:{
// minimize:true
// }
// }
// ]
// css js分离版本
use:extractTextPlugin.extract({
fallback:"style-loader",
use:[
{loader:"css-loader",options:{importLoaders:1}},
'postcss-loader' //加css前缀
]
})
},
// 图片需要下载url-loader
{
test:/\.(png|jpg|gif)/,
use:[{
loader:'url-loader',
options:{
// 图片小于50000字节的直接在文件中生成base64图片减少请求，大于就生成文件里、面
limit:50000,
// 输出文件
outputPath:"images/"
}
}]
},
// 解决html文件中图片不能正确显示
{
test:/\.(html|html)$/i,
use:['html-withimg-loader']
},
// less文件装换 less要先安装才能用npm install --save-dev less sass同理得
{
test:/\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: 'css-loader'
},
{
loader: "less-loader"
},
// 给css的熟悉加兼容前缀 例如webkit
{
loader:"postcss-loader"
}
],
fallback: "style-loader"
})
},
// 输出js，es5+以上的语法 还要去除调node_modules里面的js文件
// npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"env","react"
]
}
}
}
]
},
// 插件 用于生产模版和各项功能
plugins:[
// js压缩
new uglify(),
new htmlPlugin({
// 对html文件进行压缩，removeAttributeQuotes是去掉属性双引号
minify:{
removeAttributeQuotes:true
},
// 自动在js文件路径后面生成随机版本号，去缓存作用
hash:true,
// 要打包的html模版路径
template:"./src/index.html"
}),
// 消除css中不用的css
new extractTextPlugin("css/index.css"),
new PurifyCSSPlugin({
// 遍历你的html文件（消除不用的css）
paths: glob.sync(path.join(__dirname, 'src/*.html')),
}),
// 全局引用第三方类库，这样引用比文件中引用好，这样的话用的话就
// 调用，不用不会调用，减少文件大小
// 这种方式打包后第三方库不会抽离出来
// new webpack.ProvidePlugin({
// $:"jquery"
// }),
// 这种会抽离建议用这个 这些插件都需要npm
new webpack.optimize.CommonsChunkPlugin({
name:['jquery','vue'],
// 文件打包去到的路径
filename:"assets/js/[name].js",
// 最小打包的文件模块数，直接写2就好
minChunks:2
}),
// 打包代码的第一行添加版权说明
new webpack.BannerPlugin('VICKY的练习项目'),
// 例如项目中那些没有引用进来的图片，也需要上传到服务器中
// cnpm c install --save-dev copy-webpack-plugin
new copyWebpackPlugin([
{
from:__dirname+'/src/public',
to:'./public'
}
]),
// 热更新的插件
new webpack.HotModuleReplacementPlugin(),
],
// 配置webpack开发服务 这个云创没用到 3.6.0+版本可以热更新
devServer:{
// 设置基本目录结构
contentBase:path.resolve(__dirname,"dist"),
// 服务器地址，ip或者localhost
host:'99.6.118.125',
// 服务端压缩是否开启
compress:true,
// 端口号
port:10080
}
}
