文档章节

webpack入门测试

wshining
 wshining
发布于 2017/04/25 18:34
字数 783
阅读 26
收藏 0
点赞 0
评论 0

webpack是什么?

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

基本命令

      webpack         // 最基本的启动webpack的方法
	  webpack -w      // 提供watch方法;实时进行打包更新
	  webpack -p      // 对打包后的文件进行压缩
	  webpack -d      // 提供source map,方便调式代码

第一步安装nodeJS

在安装 Webpack 前,本地环境需要支持 node.js,下载nodeJS 安装包按照步骤,直接安装,安装的位置自定义;

安装好后运行命令行path

nodeJS中包含npm ,因此npm也会安装好可以利用node -v和 npm -v查看是否安装

如上显示则表示已将安装好,在C:\Users\Administrator\AppData\Roaming\npm目录下有如下文件,

注意:使用npm时可能初始该命令不是内部或外部命令问题,这有可能是npm配置文件出错了,

解决方法一:C:\Users\husha_000\AppData\Roaming\npm文件路径添加进环境变量中,重启命令行;

解决方法二:将npm文件删除,重新安装nodejs,简单暴力。

第二步安装全局的webpack

在命令行下执行

npm install webpack -g

这样我们才可以正确的使用webpack这个命令,

然后, 你还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法,

在命令中进入自己的项目,确定项目中有package.json文件,没有就用npm init 创建,

    npm init

在当前项目中也安装一个webpack,安装比较慢,要耐心等待

npm install webpack --save-dev

这样就可以在你的webpack.config.js里面方便的引用webpack

项目结构如下

其中app.js 是通webpack打包出来的文件,

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./app.js"></script>
</body>
</html>

main.js文件如下:

require("./main.css");
require('./mymodule.js')();

mymodule.js文件如下:

module.exports = function() {
    document.write('hello webpack');
};

webpack.config.js文件如下:

var webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: {
    	 path: __dirname,
        filename: 'app.js'
    },
    
};

执行webpack

第三步使用loader

很多模块打包工具只是针对js文件,而webpack的强大之处在于将模块的概念进行了扩展,认为一切静态文件都是模块,包括css、html模板、字体、CoffeeScript等等。虽然webpack本身依然是只能够处理js文件,但是通过一系列的loader,就可以处理其它文件了。

下面以css-loaderstyle-loader为例,演示如何打包样式文件。首先执行如下命令安装依赖模块:

    安装css-loader:  
	# npm install css-loader  --save-dev
	安装style-loader  
	# npm install style-loader  --save-dev

main.css文件如下:

body{
	background: #f00;
}

修改main.js文件:

require("./main.css");
require('./mymodule.js')();

修改webpack.config.js文件:

var webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: {
    	 path: __dirname,
        filename: 'app.js'
    },
    module:{
    	loaders:[{
			test: /\.css$/,
			loader: 'style-loader!css-loader'
    	}],
    },
    
};

执行webpack

 

注意:此处的

只能用loader: 'style-loader!css-loader',不能用 loaders: ['style', 'css', 'autoprefixer',要不然就会报错。

 

 

 

© 著作权归作者所有

共有 人打赏支持
wshining
粉丝 14
博文 64
码字总数 41353
作品 0
深圳
前端工程师
08Vue.js快速入门-Vue综合实战项目

8.1. 前置知识学习 npm 学习 官方文档 推荐资料 需要了解的知识点 有时间专门写一个这样的专题,如果需要可以邮件我。malun666@126.com webpack基础学习 官方文档 Webpack了解的知识点: es...

aicoder ⋅ 2017/11/24 ⋅ 0

1月中旬值得一读的10本技术新书(机器学习、Java、大数据等)!文末有福利!

1月中旬,阿里云云栖社区 联合 博文视点 为大家带来十本技术书籍(机器学习、Java、大数据等)。以下为书籍详情,文末还有福利哦! 书籍名称:Oracle数据库问题解决方案和故障排除手册 内容简...

阿里云云栖社区 ⋅ 01/12 ⋅ 0

库&插件&框架&工具

nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师...

掘金官方 ⋅ 01/08 ⋅ 0

学习资料积累

webpack新手入门:http://www.jianshu.com/p/42e11515c10f react 文本编辑器:react-umeditor node版文本编辑器:https://github.com/netpi/ueditor (一)react各种学习资料 1.react服务端渲...

bocat ⋅ 2016/09/08 ⋅ 0

Webpack(入门)

写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着...

Flyes ⋅ 2017/12/13 ⋅ 0

Webpack学习笔记 - 提升篇

如果你已经读了 Webpack学习笔记 - 入门篇,是不是觉得已经可以用 做些事情了。 是的,但是总觉的少了些么。馅里不只有肉,还有香菇。 开始使用Webpack 安装 插件 修改 文件 修改 配置文件 ...

他山之石 ⋅ 2016/12/28 ⋅ 0

浅谈Webpack的入门

写在前面的话 1、webpack 中文文档 https://doc.webpack-china.org/ 2、webpack 中文文档 https://www.webpackjs.com/ 说明 这是一个最基础的集合React,css模块化,热加载的webpack配置示例,...

English0523 ⋅ 01/08 ⋅ 0

webpack 入门

1. 什么是webpack 官网介绍:webpack是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。(webpack is a module bundler.webpack takes modules with dep...

力谱宿云 ⋅ 2016/05/13 ⋅ 0

react-router入门

如果您已经入门reactjs,请绕道~ 这篇博客只适合初学者,初学reactjs的时候,如果你不会webpack,相信很多人都会被官方的例子绕的晕头转向。 ES6的例子也会搞死一批入门者。之前一直用的gulp,...

馒头 ⋅ 2016/03/08 ⋅ 0

react学习资源汇总

react-tutorial a tutorial react collection and sort,let you easily get started and organized 主要是搜集整理生态从入门到深入的教程、工具和自己做的demo,以便日后查阅 :blush: 设计思...

逆蝶_Snow ⋅ 2016/12/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何解决s权限位引发postfix及crontab异常

一、问题现象 业务反馈某台应用服务器,普通用户使用mutt程序发送邮件时,提示“postdrop warning: mail_queue_enter: create file maildrop/713410.6065: Permission denied”,而且普通用法...

问题终结者 ⋅ 17分钟前 ⋅ 0

Unable to load database on disk

由于磁盘空间满了以后,导致zookeeper异常退出,清理磁盘空间后,zk启动报错,信息如下: 2018-06-25 17:18:46,904 INFO org.apache.zookeeper.server.quorum.QuorumPeerConfig: Reading co...

刀锋 ⋅ 36分钟前 ⋅ 0

css3 box-sizing:border-box 实现div一行多列

<!DOCTYPE html><html><head><style> div.container{ background:green; padding:10px 10px;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Fir......

qimh ⋅ 41分钟前 ⋅ 0

Homebrew简介和基本使用

一、Homebrew是什么 Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径...

说回答 ⋅ 48分钟前 ⋅ 0

文件压缩和打包zip、tar

第六章 文件压缩和打包 6.5 zip压缩工具 zip命令可以用来解压缩文件,或者对文件进行打包操作。zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有“.zip”扩展名的压缩文件。 注意:...

弓正 ⋅ 49分钟前 ⋅ 0

vuex

一、状态对象如何赋值给内部对象。三种方式: 1、使用computed赋值,一定要写this,不然找不到$store。 computed:{ count(){ return this.$store.state.count; }} 2、通...

大美琴 ⋅ 今天 ⋅ 0

javaScript 设计模式

1、构造函数模式 ` /** 构造一个动物的函数 */ function Animal(name, color){ this.name = name; this.color = color; this.getName = function(){ return this.name; } } // 实例一个对象 ......

fangPeng_ ⋅ 今天 ⋅ 0

日常嘚瑟:TeamCity构建中解压和打包tar

要弄一个新的构建,很简单,从两个构建的tar格式Artifact中分别取一部分,重新打一个tar。 所以,我去写个脚本用curl下载两个依赖的Artifact,然后解压移动重新打个tar? 开什么玩笑,我的技...

谷永权 ⋅ 今天 ⋅ 0

Istio官方文档中文版

阅读目录 Istio官方文档中文版 回到目录 Istio官方文档中文版 http://istio.doczh.cn/ https://istio.io/docs/concepts/what-is-istio/goals.html 为什么要使用Istio? 在从单体应用程序向分...

xiaomin0322 ⋅ 今天 ⋅ 0

CentOS 7 Omnibus 包安装 GitLab 并汉化记录

系统环境 操作系统:CentOS 7GitLab:gitlab-ce-10.8.4-ce.0.el7.x86_64.rpm 下载Omnibus安装包 使用国内镜像加速下载地址 # wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el......

admin_qing ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部