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. 用ajax写分页查询-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  2. Java基础知识二次学习-- 第二章 基础语法与递归补充

    第二章 基础语法与递归补充   时间:2017年4月24日10:39:18 章节:02章_01节,02章_02节 视频长度:49:21 + 15:45 内容:标识符,关键字与数据类型 心得:由字母,下 ...

  3. javascript基础-语法

    代表此属性ECMAScript 5(一般IE9+)才支持. 图解:—— 图解: undefined,null,NaN Infinity ECMAScript 5禁止修改 每个函数都是Function的 ...

  4. VR全景智慧城市——商家的需求才是全景市场的核心竞争力

    消费者视角痛点:比如酒店消费行业,很多消费者在预订酒店过程中,都遇到过这样的场景:网上照片里酒店房间看着宽敞明亮,格调不凡,感觉非常喜欢,等真正推开房门插上房卡一看,却大失所望.在酒店行业,网上照片和 ...

  5. poj3683

    poj3683 题意 n对新人举行婚礼,婚礼在不同时间段但可能重叠,婚礼有开始(Si).结束(Ti).仪式举行时间(Di),问能否给出一种举行方案,使得神父能参加所有的婚礼并举行仪式. 分析 xi为真 ...

  6. WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--03

    兼容问题目录 16.IE67下子级有相对定位,并且比父级要大.那父级overflow:hidden;后是包不住它的 17.IE6下同一层级的浮动元素会盖住绝对定位元素 18.IE6下定位父级的宽高是奇 ...

  7. Syntax error on tokens, delete these tokens.问题解决

    问题:Syntax error on tokens, delete these tokens.(在标记语法错误,删除这些标记) 原因:存在中文字符或者符号(包括空格):单引号.双引号不匹配:复制的代码 ...

  8. java中的中文参数存到数据库乱码问题

    关于java中的中文参数乱码问题,遇见过很多,若开发工具的字符集环境和数据库的字符集环境都一样,存到数据库中还是乱码的话,可以通过以下方法解决: 用数据库客户端检查每个字段的字符集和字符集校对和这个表 ...

  9. [Leetcode] Sort, Hash -- 274. H-Index

    Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...

  10. axis调用webservice的简单方法

    package com.service; import org.apache.axis.client.Call; import org.apache.axis.client.Service; publ ...