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. 基于本地文件系统的LocalDB

    零.前言 之前写一些小工具的时候,需要用到数据存储方面的技术,但是用数据库又觉得太大了,本地文件存储txt文件存储又不是很规范,于是乎想到了去编写一个简单的基于本地文件系统的数据存储库,暂且叫它loc ...

  2. 【JAVAWEB学习笔记】18_el&jstl&javaee的开发模式

    一.EL技术 1．EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL 出现的目的是要替代jsp页面中脚本的编写. 2．EL从域中取出数据 ...

  3. Day4-内置函数--未完待续，慢慢写

    内置函数:https://docs.python.org/3/library/functions.html?highlight=built#ascii 未完待续....

  4. HTML5&CSS3读书笔记

    Hi All, 分享一下我学HTML5 摘抄的读书笔记(我用的还是英文,因为一些新的东西还是来自于欧美国家,希望大家习惯于看一些英文材料): 1. Difference between Section ...

  5. RedHat7上安装MySQL5.7.16

    1.查看系统中是否已将安装MySQL,如果安装了,需要卸载. [root@chenguo etc]# rpm -qa|grep -i mysql 2.创建用户和组 [root@chenguo ~]# ...

  6. Angular随笔第一课

    一.调用angular 加载angular.js库(可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/a ...

  7. 高性能迷你React框架anu在低版本IE的实践

    理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错.因此必须让react连IE6,7都支持,这才是最安全.但React本身并不支持IE6, ...

  8. JS实现AOP拦截方法调用

    //JS实现AOP拦截方法调用function jsAOP(obj,handlers) {    if(typeof obj == 'function'){        obj = obj.prot ...

  9. Macbook怎么强制关闭后台程序?Macbook强制关闭后台程序的方法

    有时候我们的Macbook电脑运行某个程序卡在那里耗了很长时间,程序本身有可能提供了取消按钮,点了也没有反应,这时候我们就很想强制关闭它了,那么Macbook怎么强制关闭后台运行的程序呢?下面完美小编 ...

  10. PHP编译

    编译php-5.3.6的时候需要先打一个内存泄露的补丁,具体的操作如下 tar vzxf suhosin-0.9.32.1.tar.gz tar vjxf php-5.3.6.tar.bz2 cd p ...