【Webpack】学习随笔
参考链接：http://www.runoob.com/w3cnote/webpack-tutorial.html
Webpack 是一个前端资源加载/打包工具。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
1.1使用淘宝 NPM 镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
1.2使用 cnpm 安装 webpack
cnpm install webpack -g
1.3接下来我们创建一个目录 app
mkdir app
1.4在 app 目录下添加 runoob1.js 文件，代码如下：
document.write("It works.");
1.5在 app 目录下添加 index.html 文件，代码如下：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
1.6接下来我们使用 webpack 命令来打包(先进入app文件夹)
1.7在浏览器访问，输出结果如下所示
1.8接下来我们创建另外一个 js 文件 runoob2.js，代码如下所示
module.exports = "It works from runoob2.js.";
1.9更新 runoob1.js 文件，代码如下
document.write(require("./runoob2.js"));
1.10接下来我们使用 webpack 命令来打包
webpack runoob1.js bundle.js
在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。
LOADER
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换
2.1使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)
cnpm install css-loader style-loader
2.2接下来创建一个 style.css 文件，代码如下
body {
background: yellow;
}
2.3修改 runoob1.js 文件，代码如下：(打包后报错!)
require("!style!css!./style.css");
document.write(require("./runoob2.js"));
2.4采用配置文件的方法，创建 webpack.config.js 文件，代码如下所示（其中红色部分，必须加-loader，否则报错！！）
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
2.5打包成功
2.6浏览器显示结果
插件
插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工作。
使用内置插件需要通过以下命令来安装
cnpm install webpack --save-dev
比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
修改 webpack.config.js
var webpack=require('webpack');
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins:[
new webpack.BannerPlugin('菜鸟教程 webpack 实例')
]
};
进入app文件执行webpack
打开 bundle.js，可以看到文件头部出现了我们指定的注释信息
补充：
学习链接：http://www.jianshu.com/p/42e11515c10f
先甩一个常见的webpack配置文件，表示看不懂。先定一个小目标，就是理解下面这个配置文件，哈哈
//一个常见的Webpack配置文件
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "[name]-[hash].js"
}, module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}
]
},
postcss: [
require('autoprefixer')
], plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("[name]-[hash].css")
]
}
我的第一个疑问：webpack是干什么的，有什么用？
首先从英文字面意思理解：web+pack即网页打包
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法，比如：模块化，让我们可以把复杂的程序细化为小的文件。这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
我的第二个疑问：webpack和之前常常听说的Grunt以及Gulp相比有什么特性（了解，主要学习webpack）
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
我的第三个疑问：怎么使用webpack呢？
有两种方式，一是采用命令行的方式，二是采用配置文件方式。
我的第四个疑问：如何使浏览器监测你的代码的修改，并自动刷新修改后的结果
Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
npm install --save-dev webpack-dev-server
我的第五个疑问： Loaders的作用及如何配置
通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：
test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）loader：loader的名称（必须）include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；query：为loaders提供额外的设置选项（可选）
【Webpack】学习随笔的更多相关文章
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- webpack学习（入门基础）
webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...
- （转） 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ
特别棒的一篇文章,仍不住转一下,留着以后需要时阅读 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ
- webpack学习笔记（二）-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- Webpack学习－Plugin
原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...
- webpack 学习资料
webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/
- C#程序集Assembly学习随笔(第一版)_AX
①什么是程序集?可以把程序集简单理解为你的.NET项目在编译后生成的*.exe或*.dll文件.嗯,这个确实简单了些,但我是这么理解的.详细:http://blog.csdn.net/sws8327/ ...
- Hive入门学习随笔（一）
Hive入门学习随笔(一) ===什么是Hive? 它可以来保存我们的数据,Hive的数据仓库与传统意义上的数据仓库还有区别. Hive跟传统方式是不一样的,Hive是建立在Hadoop HDFS基础 ...
- JavaScript ES6 数组新方法 学习随笔
JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...
随机推荐
- 面向对象（基础oop）之结构与数组高级
大家好,我叫李京阳,,很高兴认识大家,之所以我想开一个自己的博客,就是来把自己所了解的知识点通过自己的话写一下,希望被博客园的朋友们点评和一起讨论一下,也希望从博客园中多认识一些软件开发人员!现在我开 ...
- java多线程(一)-五种线程创建方式
简单使用示例 Java 提供了三种创建线程的方法: 通过实现 Runnable 接口: 通过继承 Thread 类本身: 通过 Callable 和 Future 创建线程. 还有 定时器 线程池 下 ...
- Spring_Spring与DAO_Spring的事务管理
一.Spring的事务管理 在Spring中通常可以通过以下三种方式来实现对事务的管理: 使用Spring的事务代理工厂管理事务 使用Spring的事务注解管理事务 使用AspectJ的AOP配置管理 ...
- 通用CSS命名规范
一．文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...
- nodejs报错 XMLHttpRequest cannot load localhost:3000/test_date/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
z在请求本地的时候 如果ajax的URL 前面没有http的话 就会报错 jq.js:2 XMLHttpRequest cannot load localhost:3000/test_date/. ...
- 关于npm构建angular2项目问题
我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirnam ...
- IEC62304软件维护框架
软件维护计划的任务 建立接收.记录.评估.解决和追踪医疗器械软件发行后的反馈 制定确认反馈是否是问题的标准 使用风险管理过程 使用配置管理过程 制定升级.补丁以及遗留问题修正计划 问题和修改分析的任务 ...
- IEC62304开发过程框架
软件开发计划的任务 制定整体软件开发计划 制定设计和开发计划 规划软件开发的工具.标准和方法(Class C) 制定软件集成和集成计划 制定软件验证计划 制定软件风险管理计划 制定配置管理计划 软件需 ...
- CPU纯软件半虚拟化技术
在2003年出现的Xen,使用了另外的一种半虚拟化的方案来解决x86架构下CPU的敏感指令问题.主要采用Hypercall技术.Guest OS的部分代码被改变,从而使Guest OS会将和特权指令相 ...
- .NET中怎么有效的使用Cache
Cache 即高速缓存 ,我想非常多人对他的第一印象一定像我相同,感觉他一定能提高系统得性能和运行速度.的确.Net推出cache的初衷确实是这样的.那么cache是怎么提高系统性能和运行速度呢?是不 ...