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
}
}

webpack基本配置文件(含解释)的更多相关文章

  1. my.cnf 配置文件参数解释

    my.cnf 配置文件参数解释: #*** client options 相关选项 ***# #以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容.如果你 ...

  2. 分布式文件存储FastDFS(七)FastDFS配置文件具体解释

    配置FastDFS时.改动配置文件是非常重要的一个步骤,理解配置文件里每一项的意义更加重要,所以我參考了大神的帖子,整理了配置文件的解释.原帖例如以下:http://bbs.chinaunix.net ...

  3. 在C#代码中应用Log4Net(三)Log4Net中配置文件的解释

    一个完整的配置文件的例子如下所示,这个是”在C#代码中应用Log4Net(二)”中使用的配置文件. <log4net> <!-- 错误日志类--> <logger nam ...

  4. 在C#代码中应用Log4Net 中配置文件的解释

    一个完整的配置文件的例子如下所示,这个是”在C#代码中应用Log4Net(二)”中使用的配置文件. <log4net> <!-- 错误日志类--> <logger nam ...

  5. log4j配置文件详细解释

    web.xml中配置启动log4j的配置 <!-- webAppRootKey进行配置,这里主要是让log能将日志写到对应项目根目录下 --> <!-- 定义以后,在Web Cont ...

  6. [转]Log4Net中配置文件的解释

    FROM:http://www.cnblogs.com/kissazi2/p/3392605.html 一个完整的配置文件的例子如下所示 <log4net> <!-- 错误日志类-- ...

  7. 【比赛打分展示双屏管理系统-加强版】的两个ini配置文件功能解释及排行榜滚动界面的简答配置等

    加强版目录下有两个ini文件,功能解释如下: 1. ScoreTip.ini: bScoreTip:如果为1,可以启用 回避 功能 或 高低分差值超出 iScoreRange 的 提示功能. iSco ...

  8. Log4Net中配置文件的解释

    一个完整的配置文件的例子如下所示 <log4net> <!-- 错误日志类--> <logger name="logerror"> <le ...

  9. webpack 使用配置文件

    webpack入门     大多数项目会需要很复杂的设置,这就是为什么webpack要支持配置文件.这比在终端中输入大量命令要高效的多,所以让我们常见一个取代CLI选项方式的配置文件 新建 webpa ...

随机推荐

  1. Centos7 pcs pacemaker高可用安装配置详解

  2. java集合类学习笔记1

    一.集合的接口 java集合类库也将接口与实现相分离.首先看一下大家都熟悉的数据结构-队列是如何分离的.队列接口指出可以在队列的尾部添加元素,在队列的头部删除元素,并且可以查找队列中元素的个数.当需要 ...

  3. vue的三种通信方式

    一 确定组件关系二 使用第一步确定的组件关系在下面找到使用方法 1 父子通信(子组件使用父组件数据渲染) a) 在 子组件 中添加props props: [自定义prop名字] b) 在子组件中把自 ...

  4. flutter sqflite

    https://www.jianshu.com/p/88998af66e4b https://www.jianshu.com/p/7ac3ce2bc0c6

  5. 复旦大学2017--2018学年第二学期(17级)高等代数II期末考试第六大题解答

    六.(本题10分)   设 $A$ 为 $n$ 阶幂零阵 (即存在正整数 $k$, 使得 $A^k=0$), 证明: $e^A$ 与 $I_n+A$ 相似. 证明  由 $A$ 是幂零阵可知, $A$ ...

  6. d3-tip中show在自己调用时需要改变this值

    <script src="https://d3js.org/d3.v4.min.js"></script><script src="http ...

  7. Linux常用命令——文本编辑器Vim

    Linux常用命令--文本编辑器Vim Linux  Vim常用操作 插入命令 a 在光标所在字符后插入 A 在光标所在行尾插入 i 在光标所在字符前插入 I 在光标所在行首插入 o 在光标下插入新行 ...

  8. 6、Docker存储卷

    Why Data Volumes?  来自马哥教育 Data volumes Volume types  绑定挂载卷:在宿主机和容器上各指明绑定路径才能进行绑定. docker管理卷:在容器内指定挂载 ...

  9. Vue-admin工作整理(四):路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

  10. 使用TLS证书保护Docker

    使用TLS证书保护Docker 当我们使用远程调用docker时,未设置TLS的docker,将可以被任何人调用,这是极其危险的. 在阿里云上跑的docker,这次就被不怀好意的人扫描到了默认端口,2 ...