webpackage 2.x 使用

安装---(在项目目录下)

//1.初始化npm的配置(添加package.json)

npm init

//2.安装 webpackage

npm install webpack --save-dev

配置webpackage

项目结构如下

添加主页

<!DOCTYPE html>

<html>

	<header>

		<title>webpackage</title>

		<script src="dist/main.js"></script>

		<!-- <link rel="stylesheet" href="dist/main.css"> -->

	</header>

	<body>

		<div>WebPackage Test</div>

	</body>

</html>

添加main.js

/**

	路径问题

	./ 表示当前路径

	../表示上一级目录

	/.../.../xxx.js表示绝对路径

*/

import './main.css';

// require('./main.css');

document.write("Add Something Test");

添加css

div{

	color:red;

}

添加文件webpack.config.js

var webpack = require('webpack');

module.exports = {

	entry: [

		//入口文件 需要处理的文件

		'./dev/main.js'

	],

	//输出文件配置

	output: {

		//配置目录

		path: __dirname+'/dist',//distribution

		//配置生成的名字

		filename: '[name].js'

	},

	module: {

		//配置文件使用什么loader加载

        rules: [{

	        test: /\.css$/,

	        //打包到js里面

	        use: [ 'style-loader', 'css-loader' ]

	    }]

	}

}

安装插件

npm install --save-dev css-loader

npm install style-loader --save-dev

npm install --save-dev script-loader

运行

webpack

参数解析

webpack --config XXX.js   //使用另一份配置文件打包

webpack --watch   //监听变动并自动打包

webpack -p    //压缩混淆脚本

webpack -d    //生成map映射文件

说明

css文件默认打包到生成的js里面

生成单独的css文件

安装插件

npm install --save-dev extract-text-webpack-plugin

修改配置

var webpack = require('webpack');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {

	entry: [

		'./dev/main.js'

	],

	output: {

		path: __dirname+'/dist',//distribution

		filename: '[name].js'

	},

	module: {

        rules: [{

	        test: /\.css$/,

	        use: ExtractTextPlugin.extract({

	           	fallback: "style-loader",

	           	use: "css-loader"

	        })

	    }]

	}

	,plugins: [

   		new ExtractTextPlugin("[name].css")

	]

}

参考链接

webpack 教程

官方github

extract-text-webpack-plugin

script-loader

style-loader

css-loader

require路径

webpackage 2.x 使用的更多相关文章

  1. 更加优雅地搭建SSH框架（使用java配置）

    时代在不断进步,大量基于xml的配置所带来的弊端也显而易见,在XML配置和直接注解式配置之外还有一种有趣的选择方式-JavaConfig,它是在Spring 3.0开始从一个独立的项目并入到Sprin ...

  2. struts2后台返回json到jsp页面

    1.在action定义一个全局变量如: private Map<String, Object> dataMap; 2.控制层方法 说明:主要的目的是把我们定义的Map转为Json对象,然后 ...

  3. QTP鼠标点击和浏览器事件的动态切换

    今天在群里有人问到一个问题,我觉得应该会有很多人会碰到,今天根据自己的思路把这个解决方案整理出来,供自己和大家参考 需求描述: 当输入一个身份证号码的时候,这个号码所对应的数据会被加载到所属的省和市的 ...

  4. SPRING IN ACTION 第4版笔记-第五章BUILDING SPRING WEB APPLICATIONS-003-示例项目用到的类及配置文件

    一.配置文件 1.由于它继承AbstractAnnotationConfigDispatcherServletInitializer,Servlet容器会把它当做配置文件 package spittr ...

  5. SPRING IN ACTION 第4版笔记-第五章Building Spring web applications-001-SpringMVC介绍

    一. 二.用Java文件配置web application 1. package spittr.config; import org.springframework.web.servlet.suppo ...

  6. Spring学习笔记1——IOC: 尽量使用注解以及java代码（转）

    在实战中学习Spring,本系列的最终目的是完成一个实现用户注册登录功能的项目. 预想的基本流程如下: 1.用户网站注册,填写用户名.密码.email.手机号信息,后台存入数据库后返回ok.(学习IO ...

  7. 利用Eclipse构建SpringMVC项目

    简述 SpringBoot对Spring的的使用做了全面的封装,使用SpringBoot大大加快了开发进程,但是如果不了解Spring的特性,使用SpringBoot时会有不少问题 目前网上流传使用I ...

  8. Spring MVC页面重定向

    以下示例显示如何编写一个简单的基于Web的重定向应用程序,这个应用程序使用重定向将http请求传输到另一个页面. 基于Spring MVC - Hello World实例章节中代码,创建创建一个名称为 ...

  9. Vue项目分环境打包的实现步骤

    转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...

随机推荐

  1. Java基础知识二次学习--第四章 异常

    第四章 异常处理   时间:2017年4月26日11:16:39~2017年4月26日11:28:58 章节:04章_01节 04章_02节 视频长度:20:46+01:16 内容:异常的概念 心得: ...

  2. 关于Cookie安全性设置的那些事

    一.标题:关于Cookie安全性设置的那些事 副标:httponly属性和secure属性解析 二.引言 经常有看到XSS跨站脚本攻击窃取cookie案例,修复方案是有httponly.今天写出来倒腾 ...

  3. aws 装机软件

  4. LVM学习

    LVM Logical Volume Manager Volume management creates a layer of abstraction over physical storage, a ...

  5. 今天重装系统后，Wdows更新提示“windows update当前无法检查更新，因为未运行服务。您可能需要重新启动计算机”

    到百度搜了常用的解决方法,就是用命令提示符,但对我的情况不管用,提示“拒绝访问”.后来在08绿软站的一篇文章中找到了解决办法.原文如下(我本人也是用的第四种方法解决的): 试了下面几种解决方法,第四种 ...

  6. Qt之新手打包发布程序

    工具:电脑必备.QT下的windeployqt Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,如果自己去复制dll,很可能丢三落四,导致exe在别的电脑里无 ...

  7. 搭建免费wifi，嗅探接入该wifi的所有网络信息

    环境: 1: create_ap , 搭建免费wifi. 2: wireshark , 嗅探网络信息. 搭建热点 搭建热点: git clone https://github.com/oblique/ ...

  8. 抓包工具 - HttpWatch

    HttpWatch是功能强大的网页数据分析工具,集成在IE工具栏,主要功能有网页摘要.cookies管理.缓存管理.消息头发送/接收,字符查询.POST数据.目录管理功能和报告输出.HttpWatch ...

  9. 编写一个简单的Web Server

    编写一个简单的Web Server其实是轻而易举的.如果我们只是想托管一些HTML页面,我们可以这么实现: 在VS2013中创建一个C# 控制台程序 编写一个字符串扩展方法类,主要用于在URL中截取文 ...

  10. python装饰器大详解

    1.作用域 在python中,作用域分为两种:全局作用域和局部作用域. 全局作用域是定义在文件级别的变量,函数名.而局部作用域,则是定义函数内部. 关于作用域,我要理解两点:a.在全局不能访问到局部定 ...