webpack.config.js 配置及项目打包编译
//创建webpack.config.js
var webpack = require('webpack');
module.exports = {
entry:'./entry.js', //入口文件
output: {
path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它.名字可以随便起
publicPath: '../', //模板、样式、脚本、图片等资源对应的server上的路径
filename: 'js/[name].bundle.js', //每个页面对应的主js的生成配置。比如我的app.js打包后就为 js/app.bundle.js
chunkFilename: 'js/[id].bundle.js' //dundle生成的配置
},
module: {
loaders: [ //加载器,关于各个加载器的参数配置。
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
//文件加载器,处理文件静态资源
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
]
},
plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery',
_:'underscore' //加载underscore
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 将公共模块提取,生成名为`vendors`bundle
chunks: ['vendor'], //提取哪些模块共有的部分,名字为上面的vendor
minChunks: Infinity // 提取至少*个模块共有的部分
}),
new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径,相对于output配置中的 publickPath
new webpack.HotModuleReplacementPlugin() //热加载
],
};
webpack命令的几种基本命令
webpack
最基本的启动webpack方法,执行一次编译 for building once for development
webpack -w 或 --watch
增量编译,监听变动并进行自动实时打包更新 for continuous incremental build in development (fast!)
webpack -p
压缩混淆脚本,对打包后的文件进行压缩,for building once for production (minification)
webpack -d
生成 SourceMaps映射文件,告知哪些模块被最终打包到哪里,方便调试。 to include source maps
webpack --display-error-details
查看查找过程,方便出错时能查阅更详尽的信息
webpack --config XXX.js
使用另一份配置文件来打包
webpack --colors
输出结果带彩色,比如:会用红色显示耗时较长的步骤
webpack --profile
输出性能数据,可以看到每一步的耗时
webpack --display-modules
默认情况下node_modules下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
网友评论