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. C语言之强化，弱化符号weak

    一.概述 在C语言中,函数和初始化的全局变量(包括显示初始化为0)是强符号,未初始化的全局变量是弱符号. 对于它们,下列三条规则使用: ① 同名的强符号只能有一个,否则编译器报"重复定义&q ...

  2. SQL Server中INNER JOIN与子查询IN的性能测试

    这个月碰到几个人问我关于"SQL SERVER中INNER JOIN 与 IN两种写法的性能孰优孰劣?"这个问题.其实这个概括起来就是SQL Server中INNER JOIN与子 ...

  3. Linux 通过端口转发来访问内网服务

    Rinetd是为在一个Unix和Linux操作系统中为重定向传输控制协议(TCP)连接的一个工具,系统内部服务受系统网服限制外部无法访问,需要通过rinetd映射将内网服务转发出来. 1. 下载解压 ...

  4. Spring Boot 整合 Elasticsearch，实现 function score query 权重分查询

    摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 预见未来最好的方式就是亲手创造未来 – <史蒂夫·乔布斯传> 』 运行环境: ...

  5. 基于TypeScript的FineUIMvc组件式开发（概述）

    WebForm与Mvc 我简单说一下WebForm与Mvc,WebForm是微软很早就推出的一种WEB开发架构,微软对其进行了大量的封装,使开发人员可以像开发桌面程序一样去开发WEB程序,虽然开发效率 ...

  6. qt添加资源文件方法

    File->new file->file and classes->Qt->qt resources->   add name   add->add prefix- ...

  7. 我和 flow.ci 的第一次亲密接触

    编者按:本文转载自 flow.ci 用户 @君赏 的实践分享,原文链接这里. 这不是第一次听说 flow.ci ,记得当时 fir.im 新出这个服务的时候,我也是心情十分激动的去尝试,结果是只支持安 ...

  8. 一个可以控制提示框显示为top,bottom,left,right的小方法

    html代码 <!doctype html><html><head><meta charset="utf-8"><title& ...

  9. Node.js 8有哪些重要功能和修复？

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 5月30日12点,Node.js 8正式发布了,这个版本具有一系列新功能和性能改进,并且这些功能和改进将获得长期支持(LTS). ...

  10. Android6.0-运行时权限处理

    为什么需要有运行时权限? 大家都知道在Android6.0之前,权限在应用安装过程中只询问一次,以列表的形式展现给用户,如果点击取消(即不认可应用所申请的权限),则会取消应用的安装.而用户出于安装应用 ...