标签：模块加载 node chunk try tput 使用 es6 cti nbsp
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
安装
在node环境下，通过npm安装webpack
npm install webpack -g
启动webpack
webpack // 执行一次开发的编译 webpack -p // 针对发布环境编译(压缩代码) webpack -w // 进行开发过程持续的增量编译(飞快地!) webpack -d // 生成map映射文件，告知哪些模块被最终打包到哪里了 webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
配置文件(webpack.config.js)
var webpack = require(‘webpack‘); var commonsPlugin = webpack.optimize.CommonsChunkPlugin; module.exports = { entry: { index : ‘./index.js‘ }, output: { path: path.resolve(__dirname, ‘./dist‘), filename: ‘build.[name].js‘ }, module: { loaders: [ { test: /\.css$/, loader: ‘style-loader!css-loader‘ }, { test: /\.js$/, loader: ‘jsx-loader?harmony‘ }, { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘}, { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘} ] },
plugins: [new commonsPlugin("commons.js")]
};
1、entry页面入口文件配置，output 是对应输出项配置
entry: { page1: "./page1.js", //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出 page2: "./page2.js" }, output: { path: path.resolve(__dirname, ‘./dist‘), filename: ‘build.[name].js‘ } 最终会生成一个build.page1.js和build.page2.js，并存放在./dist文件下。
模块加载器
1、style-loader css-loader
安装：npm install --save-dev style-loader css-loader
{ test: /\.css$/, loader: ‘style-loader!css-loader‘ }
style-loader表示将所有的计算后的样式加入页面中，css-loader表示使用类似@import 和 url(...)的方法实现 require()的功能。二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
2、url-loader
安装：npm install --save-dev url-loader
{test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
url-loader可以用来打包css中引用的图片,如上，在小于8K的图片将直接以base64的形式内联在代码中
3、babel-loader
安装：npm install --save-dev babel-loader babel-core babel-preset-es2015
{ test: /\.js$/, loader: ‘babel-loader‘, exclude: /node_modules/}
将所有目录下的es6代码转译为es5代码，但不包含node_modules目录下的文件
3、sass-loader
安装：npm install --save-dev sass-loader
{ test: /\.scss$/, loader: ‘style!css!sass‘}
配置webpack-dev-server
构建本地服务器，自动刷新新监测代码，
安装：npm install --save-dev webpack-dev-server
//webpack.config.js
module.exports = { devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, } }
//package.json "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }
插件plugins
1、CommonsChunkPlugin自定义公共模块提取
用于提取多个入口文件的公共部分，然后生成一个common.js来方便多页面之间进行利用。
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘); plugins: [ commonsPlugin ]
2、extract-text-webpack-plugin 独立打包样式文件
有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以<link>标签引入。这时候我们需要 extract-text-webpack-plugin 来帮忙：
安装：npm install --save-dev extract-text-webpack-plugin
var ExtractTextPlugin = require("extract-text-webpack-plugin"); plugins: [ new ExtractTextPlugin(‘[name].css‘, {allChunks: true}) ], module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.scss$/, loader: ExtractTextPlugin.extract(‘style-loader‘, ‘css-loader!sass-loader‘) }, ] }
标签：模块加载 node chunk try tput 使用 es6 cti nbsp
原文地址：http://www.cnblogs.com/kerry-xu/p/6360203.html
