webpack自动编译
❶ webpack编译less
webpack loaders
webpack 编译 less 需要使用到的 loader :
* less-loader
将 less 文件编译成 CSS ；
1.创建本地项目 webpack-demo
2.在 webpack-demo 的根目录下创建 package.json 文件
模块说明：
4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置
5.安装需要的loader和依赖
6.创建一个名为 test.less 的文件
并将该文件引入 webpack 的入口文件 entry.js 中；
7.配置编译 less 的 loader
7.运行编译命令
❷ Webpack 怎么用
1. 为什么用 webpack?
他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.
2. Webpack 给 Browserify 的同学用
对应地:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码.
3. 怎样启动 webpack
切换到有 webpack.config.js 的目录然后运行:
webpack 来执行一次开发的编译
webpack -p for building once for proction (minification)
webpack -p 来针对发布环境编译(压缩代码)
webpack --watch 来进行开发过程持续的增量编译(飞快地!)
webpack -d 来生成 SourceMaps
4. JavaScript 方言
Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 现在可以写 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
5. 样式表和图片
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀<style>标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
path: './build', // 图片和 JS 会到这里来
publicPath: 'http://mycdn.com/', // 这个用来成成比如图片的 URL
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 来连接多个人 loader
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
]
}
};
6. 功能开关
有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:
if (__DEV__) {
console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
然后配置 Webpack 当中的对应全局变量:
// webpack.config.js
// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.
7. 多个进入点(entrypoints)
比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 "main mole":
// webpack.config.js
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // 模版基于上边 entry 的 key
}
};
针对 profile, 在页面当中插入 <script src="build/Profile.js"></script>. feed 页面也是一样.
8. 优化共用代码
feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.
// webpack.config.js
var webpack = require('webpack');
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin('common.js');
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
};
在上一个步骤的 script 标签前面加上 <script src="build/common.js"></script> 你就能得到廉价的缓存了.
9. 异步加载
CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.
声明你想要异步加载的那个"分界点". 比如:
if (window.location.pathname === '/feed') {
showLoadingState();
require.ensure([], function() { // 语法奇葩, 但是有用
hideLoadingState();
require('./feed').show(); // 函数调用后, 模块保证在同步请求下可用
});
} else if (window.location.pathname === '/profile') {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require('./profile').show();
});
}
Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.
Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 output.publicPath 来配置.
// webpack.config.js
output: {
path: "/home/proj/public/assets", // path 指向 Webpack 编译能的资源位置
publicPath: "/assets/" // 引用你的文件时考虑使用的地址
}
❸ webpack 热重载的3种方式
开发阶段，如果每次文件变更后，都要手动去打包build是很不方便的，通常在开发阶段采用以下三种方式进行热重载（自动编译）
配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。package.json文件增加watch脚本 --watch 动态监听文件的改变并实时打包，输出新的文件，这样文件多了之后速度会很慢，而且此打包方式不会热更新，即每次webpack编译之后，你还需要手动刷新浏览器。
缺点： 需手动刷新浏览器
优点： 自动编译
webpack-dev-server实际上相当于启用了一个express的Http服务器＋调用了webpack-dev-middleware【简单的web服务器和实时重载】。这个Http服务器和client使用了websocket通讯协议，原始文件做出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-middleware将webpack编译后的文件输出到内存中。【这边注意，最后的编译的文件并没有输出到目标文件夹，都保存到了内存】（适合纯前端项目，很难编写后端服务，进行整合）
优点： 自动编译 + 实时重新加载浏览器
webpack-dev-server
缺点： 需手动刷新浏览器 + 配置文件和插件多
优点： 自动编译
定义了webpack.config里的entry和output的关系脉络，webpack-dev-middleware能在此基础上形成一个文件映射系统，每当应用程序请求一个文件。它匹配到了就把内存中缓存的对应结果以文件格式返回，反之进入下一个中间件。
因为是内存型文件系统，所以重建速度非常快，很适合于开发阶段用作静态资源服务器；因为webpack可以把任何一种资源当作是模块来处理，因此能向客户端反馈各种格式的资源，所以可以替代HTTP服务器。
三者相比：观察模式在开发中不实用;web服务器实用性强；webpack中间件+express使用了2个插件，2个配置文件，配置复杂
事实上，大多数 webpack 用户用过的 webpack-dev-server 就是一个 express＋webpack-dev-middleware 的实现。
二者的区别仅在于 webpack-dev-server 是封装好的，除了 webpack.config 和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由。
是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload），这也是webpack文档里常说的HMR（Hot Mole Replacement）。HMR和热加载的区别是：热加载是刷新整个页面。
运行方式：
1、命令行
package.json中指令加上 --hot
2、Nodejs API
热更新热重载
webpack-dev-server 自动打包/热重载
❹ webpack基本使用
step1: 创建一个项目录
注意：项目名一般 不要带中文
step2: 创建 package.json
或者：
step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不薯早识别的高级语法:
总结：webpack可以做两件事情况：
step5: 配置入口文件和出口文件
每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和宏锋出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包：
step6: 实现自动打包编译
每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。
webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack
在 package.json 文件中配置命令：
在终端中执行命令：
注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。
改变文件引用路径：
执行上述命令后终端会有类似信息输出：
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上
【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问
【Content not from webpack is served from C:UsersyfbDesktop前端学习案例4.27wabpackDemo_1src】——不是通过webpack打包的文件，则是以src为根目录访问。
该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_moles平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。
因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:
step7: 自动打开浏览器进行访问、配置端口号、指定托管的根蔽手晌目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）
在 package.json 中配置命令，并重启服务器：
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。
安装 html-webpack-plugin 插件：
在 webpack.config.js 配置文件中配置插件：
html-webpack-plugin 插件的两个作用：
step9: 处理样式文件
html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。
处理css文件：
处理less样式文件