简介
本人Java后台狗一枚,本着全“干”工程师的目的,一边学习一边努力提升自己。本文记录了使用webpack进行打包项目的过程。
webpack是一款时尚的模块加载和打包工具,当下主流的开源项目都已经使用webpack进行开发,所以,使用webpack,走在时尚的潮流(玩笑话)。
步骤
安装
常规使用方法,新建项目npm init
,使用npm install webpack --save-dev
进行安装。
配置
我们需要告诉webpack需要做一些什么,新建文件配置文件webpack.config.js
。并参考以下配置:
const webpack = require('webpack')
const webpackConfig = {
name: 'client',
target: 'web',
devtool: 'source-map',
resolve: { //其它解决方案配置
root: paths.client(),
extensions: ['', '.web.js', '.js', '.jsx', '.json']
},
module: {},
postcss: []
}
webpackConfig.entry = { //页面入口文件配置
app: __DEV__
? ['whatwg-fetch', APP_ENTRY].concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`)
: ['whatwg-fetch', APP_ENTRY],
vendor: config.compiler_vendors
}
webpackConfig.output = { //入口文件输出配置
filename: `js/[name].[${config.compiler_hash_type}].js`,
chunkFilename: 'js/[name].[chunkhash].js',
path: paths.dist(),
publicPath: config.compiler_public_path
}
webpackConfig.module.loaders = [{ //加载器配置
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory : true,
plugins : ['transform-runtime'],
presets : ['es2015', 'react', 'stage-0']
}
}, {
test: /\.json$/,
loader: 'json'
}]
webpackConfig.plugins = [ //插件配置
new webpack.DefinePlugin(config.globals), //将config.globals变量定义在开发代码中
new HtmlWebpackPlugin({
template: paths.client('index.html'),
hash: false,
favicon: paths.client('static/favicon.ico'),
filename: viewName,
inject: 'body',
minify: {
collapseWhitespace: true
}
})
]
其中 plugins
是插件项,entry
是页面入口文件配置,output
是对应输出项配置(即入口文件最终要生成什么名字的文件、存放到哪里),module.loaders
是最关键的一块配置。它告知 webpack
每一种文件都需要使用什么加载器来处理。
运行
其中推荐执行命令为如下:
webpack --display-error-details
webpack --config XXX.js //使用另一份配置文件打包
webpack --watch //监听变动并自动打包
webpack -p //压缩混淆脚本
webpack -d
总结
webpack版本更新的很快,建议及时去中文官网中查看相关文档。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。