webpack基本配置文件（含解释）

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

}

}