webpack.config.js 配置及項目打包編譯
//創(chuàng)建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: [ //加載器朋凉，關于各個加載器的參數(shù)配置。
{
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]')
}
},
{
//文件加載器醋安，處理文件靜態(tài)資源
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方法茬故，執(zhí)行一次編譯 for building once for development
webpack -w 或 --watch增量編譯盖灸，監(jiān)聽變動并進行自動實時打包更新 for continuous incremental build in development (fast!)
webpack -p壓縮混淆腳本蚁鳖，對打包后的文件進行壓縮磺芭，for building once for production (minification)
webpack -d生成 SourceMaps映射文件，告知哪些模塊被最終打包到哪里醉箕，方便調(diào)試钾腺。 to include source maps
webpack --display-error-details查看查找過程徙垫，方便出錯時能查閱更詳盡的信息
webpack --config XXX.js 使用另一份配置文件來打包
webpack --colors 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟
webpack --profile 輸出性能數(shù)據(jù)放棒，可以看到每一步的耗時
webpack --display-modules 默認情況下node_modules下的模塊會被隱藏姻报，加上這個參數(shù)可以顯示這些被隱藏的模塊
