webpack2 配置 示例
// https://github.com/webpack-contrib/extract-text-webpack-plugin
var webpack = require("webpack");
var path = require('path');
var fs = require('fs');
var argv = require('yargs').argv;
// npm install --registry=https://registry.npm.taobao.org -D
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractSCSS = new ExtractTextPlugin(`[hash].scss.css`);
var extractLESS = new ExtractTextPlugin(`[hash].less.css`);
var adminTemplate = fs.readFileSync('template/admin.html','utf-8');
var css_tag = function(s){
return `<link rel="stylesheet" type="text/css" href="/static/${s}" />`
}
var js_tag = function(s){
return `<script type="text/javascript" src="/static/${s}"></script>`
}
var deleteFolderRecursive = function(p) {
if( fs.existsSync(p) ) {
fs.readdirSync(p).forEach(function(file,index){
var curPath = p + "/" + file;
if(fs.lstatSync(curPath).isDirectory()) { // recurse
deleteFolderRecursive(curPath);
} else { // delete file
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(p);
}
};
var destfolder = `dist`
var ProgressHook = new webpack.ProgressPlugin(function (percentage, msg) {
if (percentage==0){
deleteFolderRecursive(destfolder)
fs.mkdirSync(destfolder)
} else if (percentage==1){
var jslist = []
var csslist = []
fs.readdirSync(destfolder).forEach(function(file, index){
var ext = path.extname(file)
if (ext == '.css') {
csslist.push(css_tag(file))
}else if ( ext == '.js' && file.split('.').length == 2){
jslist.push(js_tag(file))
}
})
var jsBlock = jslist.join('\n');
var cssBlock = csslist.join('\n');
fs.writeFile(`../html/admin.html`, eval('`'+adminTemplate+'`'));
}
})
module.exports = {
resolve: {
modules: [
path.resolve('./css'),
path.resolve('./js'),
'node_modules',
],
extensions: [ ".js", ".vue"],
},
entry: "./entry.js",
output: {
path: path.resolve('./dist'),
publicPath: `/static/`,
filename: `[hash].js`,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.vue$/,
loader: 'vue',
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: extractSCSS.extract(["css-loader","sass-loader"]),
},
{
test: /\.less$/,
use: extractLESS.extract(["css-loader","less-loader"]),
},
{
test: /\.coffee$/,
use: "coffee-loader",
},
// {
// test: /\.(png|jpg|gif|svg|eot)$/,
// loader: 'file-loader',
// options: {
// name: '[name].[ext]?[hash]'
// }
// },
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=100&mimetype=application/font-woff'},
//{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=100&mimetype=image/svg+xml'},
],
},
plugins: [
extractLESS,
extractSCSS,
ProgressHook,
],
};
webpack2 配置 示例的更多相关文章
- Nginx 简单的负载均衡配置示例(转载)
原文地址:Nginx 简单的负载均衡配置示例(转载) 作者:水中游于 www.s135.com 和 blog.s135.com 域名均指向 Nginx 所在的服务器IP. 用户访问http://www ...
- HBase + Kerberos 配置示例(二)
接上篇<HBase + Kerberos配置示例(一)>,我们继续剩下的配置工作. 环境准备 Hadoop配置 Zookeeper配置 HBase配置 Java测试程序 环境准备 安装ha ...
- 全互联结构DVPN综合配置示例
以下内容摘自正在全面热销的最新网络设备图书“豪华四件套”之一<H3C路由器配置与管理完全手册>(第二版)(其余三本分别是:<Cisco交换机配置与管理完全手册>(第二版).&l ...
- Haproxy的安装和配置示例
1.ha proxy简介ha proxy是一个开源的,高性能的,基于tcp第四层和http第七层应用的负载均衡软件优点:可靠性和稳定性非常好 最高可以同时维护40000-50000个 ...
- MyBatis Generator配置示例
(一).MBG介绍 MyBatis Generator(MBG)是一个Mybatis的代码生成器,它可以用来生成可以访问(多个)表的基础对象.MBG解决了对数据库操作有最大影响的一些简单的CRUD(插 ...
- haproxy反向代理配置示例
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- java日志规约及配置示例终极总结
目录 什么是日志 常用日志框架 日志级别详解 日志的记录时机 日志使用规约 logback 配置示例 loh4j2 配置示例 什么是日志? 简单的说,日志就是记录程序的运行轨迹,方便查找关键信息,也方 ...
- OSPF Sham-Link配置示例
在MPLS/VPN环境中,如果PE-CE之间使用OSPF交换路由信息,OSPF route将作为VPNv4 route(携带OSPF domain ID,OSPF Router ID,OSPF Rou ...
- haproxy配置示例和需要考虑的问题
HaProxy系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html haproxy是一个非常优秀的负载均衡工具,它的特性非常丰富,功能也非常非常 ...
随机推荐
- WPF 字符串溢出判断,字符串长度是否超过控件宽度
TextBloc可以将TextTrimming属性设置为CharacterEllipsis 其他控件可以在控件大小变更或者其他事件上附加下列方法 private void OnEllipsis(obj ...
- python读取excel时,数字自动转化为float
xlrd模块去读excel时会将数字类型的自动转化为浮点数,这是一个小坑.在网上查了一下,该模块的作者也说过Excel treats all numbers as floats. In general ...
- C++11的value category(值类别)以及move semantics(移动语义)
转载请保留以下声明 作者:赵宗晟 出处:http://www.cnblogs.com/zhao-zongsheng/p/value_categories_and_move_semantics.html ...
- 虚拟机工作站创建虚拟机并安装Linux教程
前言: 今天开始学习一下Linux,之前早就想看,但是一直没时间,最近把其他知识整理完了,终于有时间来看一下Linux了. 本节只是安装虚拟机工作站,虚拟机,和Linux操作系统的过程,详细的记录了我 ...
- PyCharm 2018 永久激活
PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制. ...
- python的变量与赋值
1.变量的命名规则 变量其实通过一个标记调用内存中的值,而变量名就是这个标记的名称,但是万一这个标记已经被提前占用或者解释器认为这个标记是不合法的,那么就会报错.下面总结了一下变量的命名规则: 1.不 ...
- 深入理解.net - 2.多态 Polymorphsim
通过上篇文章 继承的本质 深入介绍了继承过程中对象的的创建过程,相信对继承已经有了一个深入的理解,本文则详细剖析一下面向对象设计的另一要素多态(Polymorphsim). 什么是多态 官方MSDN上 ...
- spring mvc中的注解说明
注解扫描 context:component-scan 包扫描 <context:component-scan base-package="org.bdp"> < ...
- ActiveMQ笔记:一个高稳定,可扩展的的部署方案
本文介绍一个笔者在实际工作中的实施的基于ActiveMQ的一个高稳定,可扩展的异步消息系统. ActiveMQ是一个成熟的基于Java语言的开源消息系统,在实际应用中被大量使用.ActiveMQ在系统 ...
- [HNOI2010]MATRIX 矩阵
Description Input 第一行包含三个正整数N M P表示矩阵的行数列数以及每个数的范围,接下来N行每行包含M个非负整数,其中第i行第j个数表示以格子(i,j)为右下角的2*2子矩阵中的数 ...