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. 文本主题模型之LDA(二) LDA求解之Gibbs采样算法

    文本主题模型之LDA(一) LDA基础 文本主题模型之LDA(二) LDA求解之Gibbs采样算法 文本主题模型之LDA(三) LDA求解之变分推断EM算法(TODO) 本文是LDA主题模型的第二篇, ...

  2. 学生成绩管理C++版

    [标题]学生成绩管理的设计与实现 [开发语言]C++ [主要技术]STL [概要设计]类名:student 类成员:No.Name.Math.Eng.Chn.Cpro.Sum 成员函数:getname ...

  3. Struts2 Handle 404 error page and wrong action

    1. To handle 404 not found yourself, just add this code to your web.xml <error-page> <error ...

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

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

  5. Linux与mv命令结合，移动文件至指定目录

    转自:http://blog.csdn.net/hardwin/article/details/7711635 把当前目录下面的file(不包括目录),移动到/opt/shell find  .  - ...

  6. node使用消息队列RabbitMQ一

    基础发布和订阅 消息队列RabbitMQ使用 1 安装RabbitMQ服务器 安装erlang服务 下载地址 http://www.erlang.org/downloads 安装RabbitMQ 下载 ...

  7. C# 通过 oledb 操作Excel

    public string GetConnectionString()         {             Dictionary<string, string> props = n ...

  8. Web开发安全小贴士

    想要开发出一个安全的.健壮的Web应用其实是非常困难的, 如果你想要快速开发出一款集使用价值.用户体验度.以及安全性为一身的产品,以下安全步骤很必要!!!     数据库 1.对类似访问令牌.电子邮箱 ...

  9. C# 类型基础（中）

    前一篇文章中我们讲到了值类型和引用类型的一些区别,那这篇我们将深入的分析一下到底有什么不一样 先总结一下两者的差别: 黄金法则: 1.引用类型总是被分配到托管堆上. 2.值类型总是分配到它声明的地方: ...

  10. MD5加密算法（信息摘要算法）、Base64算法

    1 什么是MD5 信息摘要算法,可以将字符进行加密,每个加密对象在进行加密后都是等长的 应用场景:将用户密码经过MD5加密后再存储到数据库中,这样即使是超级管理员也没有能力知道用户的具体密码是多少:因 ...