标签：index uglifyjs 入口 文件名 sha 语句 正则表达 依赖 标签
Webpack 是一个强力的模块打包器。 所谓 包 (bundle) 就是一个 JavaScript 文件，它把一堆 资源 (assets) 合并在一起，以便它们可以在同一个文件请求中发回给客户端。 包中可以包含 JavaScript 、 CSS 样式、 HTML 以及很多其它类型的文件。
1、安装
//全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack
我们通过一个 JavaScript 配置文件 webpack.config.js 来决定 Webpack 做什么以及如何做。
2、入口与输出
entry: {
app: ‘src/app.ts‘
}
Webpack 探查那个文件，并且递归遍历它的 import 依赖。
output: {
filename: ‘app.js‘
}
这个 app.js 输出包是个单一的 JavaScript 文件，它包含程序的源码及其所有依赖。 后面我们将在 index.html 中用 <script> 标签来加载它。
3、多重包
entry: {
app: ‘src/app.ts‘,
vendor: ‘src/vendor.ts‘
},
output: {
filename: ‘[name].js‘
}
在输出文件名中出现的 [name] 是一个 Webpack 的 占位符 ，它将被替换为入口点的名字，分别是 app 和 vendor
4、加载器
loaders: [
{
test: /\.ts$/
loaders: ‘ts‘
},
{
test: /\.css$/
loaders: ‘style!css‘
}
]
当 Webpack 遇到像这样的 import 语句时……
import { AppComponent } from ‘./app.component.ts‘;
import ‘uiframework/dist/uiframework.css‘;
它会使用 test 后面的正则表达式进行模式匹配。
5、插件
plugins: [ new webpack.optimize.UglifyJsPlugin() ]
我们已经了解webpack的基本配置了，那么我们开始
6、完整配置
module.exports = {
entry: ‘./index.js‘,
devtool: ‘source-map‘,
output: {
filename: ‘[name].js‘
},
resolve: {
alias:{ jquery: ‘src/lib/jquery.js‘, }
},
plugins: [
new webpack.ProvidePlugin({
$: ‘jquery‘,
_: ‘underscore‘,
React: ‘react‘
}),
new WebpackNotifierPlugin()
],
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: ‘babel-loader‘
}, {
test: /\.less$/,
loaders:[‘style-loader‘, ‘css-loader‘,‘less-loader‘]
}, {
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}, {
test: /\.html/,
loader: "html-loader?" + JSON.stringify({minimize: false })
} ]
}
};
标签：index uglifyjs 入口 文件名 sha 语句 正则表达 依赖 标签
原文地址：http://www.cnblogs.com/sonwrain/p/6074609.html
