Webpack 怎么用

1 为什么用 webpack
他像 Browserify, 但是将你的应用打包为多个文件 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码 当他么访问到另一个页面, 他们不需要重新下载通用的代码
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包, 还有其他一些
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6) 如果你不知道用什么, 就用 CommonJS
2 Webpack 给 Browserify 的同学用
对应地:
browserify mainjs > bundlejs
webpack mainjs bundlejs
Webpack 比 Browserify 更强大, 你一般会用 webpackconfigjs 来组织各个过程:
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码
3 怎样启动 webpack
切换到有 webpackconfigjs 的目录然后运行:
webpack 来执行一次开发的编译
webpack -p for building once for production (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):
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
},
module: {
loaders: [
{ test: /\coffee$/, loader: 'coffee-loader' },
{ test: /\js$/, loader: 'jsx-loaderharmony' } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolveextensions 参数指明那些文件 Webpack 是要搜索的:
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
},
module: {
loaders: [
{ test: /\coffee$/, loader: 'coffee-loader' },
{ test: /\js$/, loader: 'jsx-loaderharmony' }
]
},
resolve: {
// 现在可以写 require('file') 代替 require('filecoffee')
extensions: ['', 'js', 'json', 'coffee']
}
};
5 样式表和
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require('/bootstrapcss');
require('/myappless');
var img = documentcreateElement('img');
imgsrc = require('/glyphpng');
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀<style>标签 当你引入, Webpack 在包当中插入对应的 URL, 这个 URL 是由require()` 返回的
你需要配置 Webpack(添加 loader):
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
path: '/build', // 和 JS 会到这里来
publicPath: '>JS跨域及解决方案 介绍了跨域的基本概念和解决方案，但是在开发中，我们就需要采用新的技术去实现。
浏览器发送请求到非同源服务器，会导致跨域问题，而服务器与服务器之间的通信是不存在跨域问题的，因此我们在本地 npm run serve 搭建的服务器，先接收到我们的请求，之后由本地服务器转发请求到目标服务器即可获取资源，再将资源从本地服务器发送给浏览器，这是 Webpack 中配置 devServer 解决跨域的思路。
1、在webpack配置文件的devServer里面配置如下信息

2、2 配置中的主要参数说明

---