webpack模組化開發
/*
* @Author: 瓊歌先生
* @Date: 2018-07-30 14:07:03
* @Last Modified by: lastName.瓊歌先生
* @Last Modified time: 2018-07-31 16:51:19
*/
//-----------------------------------------載入---------------------------------------------------------------
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 環境變數配置，以此區分是dev / online環境，通過配置可以使得
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log("部署的環境:" + WEBPACK_ENV);
//------------------------------------------公共方法----------------------------------------------------------
// 獲取html-webpack-plugin引數的方法
var getHtmlConfig = function (name, title) {
console.log("啟動物件:getHtmlConfig 以設定統一引數");
return {
template: './src/view/' + name + '.html', //需要引入檔案的html檔案
filename: 'view/' + name + '.html', //編譯後的檔案放置的位置
favicon: './favicon.ico',
title: title, //標題
inject: true, //是否自動引入
hash: true, //是否設定hash
chunks: ['common', name] //引入的模組
};
};
//-------------------------------------webpack config物件----------------------------------------------------
var config={
entry: { //入口檔案，配置需要訪問的頁面
'common': './src/page/common/index.js',
'index': './src/page/index/index.js',
//'list': './src/page/list/index.js',
//'detail': './src/page/detail/index.js',
//'cart': './src/page/cart/index.js',
//'order-confirm': './src/page/order-confirm/index.js',
//'order-list': './src/page/order-list/index.js',
//'order-detail': './src/page/order-detail/index.js',
//'payment': './src/page/payment/index.js',
//'user-login': './src/page/user-login/index.js',
//'user-register': './src/page/user-register/index.js',
//'user-pass-reset': './src/page/user-pass-reset/index.js',
//'user-center': './src/page/user-center/index.js',
//'user-center-update': './src/page/user-center-update/index.js',
//'user-pass-update': './src/page/user-pass-update/index.js',
//'result': './src/page/result/index.js',
//'about': './src/page/about/index.js',
},
output: { //輸出檔案
/*
* 【改動】：刪除path的配置，在webpack4中檔案預設生成的位置就是/dist,
* 而publicPath和filename特性的設定要保留
*/
// path : __dirname + '/dist/',//存放檔案時候的路徑
publicPath: 'dev' === WEBPACK_ENV ? '/dist/' : '//s.happymmall.com/MMALL_NEW/dist/', //訪問檔案時候的路徑
filename: 'js/[name].js'
},
externals: { //設定jquey模組,以後的jquery可以直接在頁面引用
'jquery': 'window.jQuery'
},
module:{//處理載入的樣式
rules: [ //以前的loader載入器欄位換為rules欄位,用來放各種檔案的載入器
// css檔案的處理：css的載入方式
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ //用於抽離css到單獨的模組中
fallback: "style-loader",
use: "css-loader"
})
},
// 模板檔案的處理：檔案的載入方式
{
test: /\.string$/,
use: {
loader: 'html-loader',//安裝依賴
options: {
minimize: true,
removeAttributeQuotes: false
}
}
},
// 圖片的配置：圖片的載入方式和字型檔案分開
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader', //圖片的依賴，正常邏輯會生成一個base64的串部署在css中
options: {
/*
* 【改動】：圖片小於2kb的按base64打包
*/
limit: 2048, //小於該kb值會變成base64
name: 'resource/[name].[ext]' //拓展名
}
}]
},
// 字型圖示的配置：字型檔案的載入方式變化
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/, //字型檔案型別
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}]
}
//追加位置
]
},
/**
*
* 正常情況下，我們如果需要在js頁面引用工具類，那麼我們需要執行類似：
* var _mm=require('../../../mm.js');
* 這樣的操作會使得頁面出現很多的冗餘， 並且很難看, 因此我們可以設定將某些頁面路徑給全域性化resolve
* 請求方式：require('util/mm.js'),require會自覺去匹配util的路徑並自動內部補充
*/
resolve: {
alias: {
node_modules: __dirname + '/node_modules', //指向當前路徑，以後請求則變成
util: __dirname + '/src/util',
page: __dirname + '/src/page',
service: __dirname + '/src/service',
image: __dirname + '/src/image'
}
},
/*
* 【新增】：webpack4裡面移除了commonChunksPulgin外掛，放在了config.optimization裡面
* npm install extract-text-webpack-plugin --save - dev 用於獨立出css樣式
*/
optimization: {
runtimeChunk: false,
splitChunks: {
cacheGroups: {
common: {
name: "common",
chunks: "all",
minChunks: 2
}
}
}
},
plugins: [
/*
* 【移除】：webpack4裡面移除了commonChunksPulgin外掛
*/
// // 獨立通用模組到js/base.js
// new webpack.optimize.CommonsChunkPlugin({
// name : 'common',
// filename : 'js/base.js'
// }),
// 把css單獨打包到檔案裡
new ExtractTextPlugin("css/[name].css"),//根據名字打包成不同的名稱的css樣式
// html模板的處理:html-webpack-plugin的方法會使得,不用再頁面在寫引入css,而是由系統自己去追加
new HtmlWebpackPlugin(getHtmlConfig('index', '首頁')),
new HtmlWebpackPlugin(getHtmlConfig('list', '商品列表')),
//new HtmlWebpackPlugin(getHtmlConfig('detail', '商品詳情')),
//new HtmlWebpackPlugin(getHtmlConfig('cart', '購物車')),
//new HtmlWebpackPlugin(getHtmlConfig('order-confirm', '訂單確認')),
//new HtmlWebpackPlugin(getHtmlConfig('order-list', '訂單列表')),
//new HtmlWebpackPlugin(getHtmlConfig('order-detail', '訂單詳情')),
//new HtmlWebpackPlugin(getHtmlConfig('payment', '訂單支付')),
new HtmlWebpackPlugin(getHtmlConfig('user-login', '使用者登入')),
//new HtmlWebpackPlugin(getHtmlConfig('user-register', '使用者註冊')),
//new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset', '找回密碼')),
//new HtmlWebpackPlugin(getHtmlConfig('user-center', '個人中心')),
//new HtmlWebpackPlugin(getHtmlConfig('user-center-update', '修改個人資訊')),
//new HtmlWebpackPlugin(getHtmlConfig('user-pass-update', '修改密碼')),
//new HtmlWebpackPlugin(getHtmlConfig('result', '操作結果')),
//new HtmlWebpackPlugin(getHtmlConfig('about', '關於MMall')),
],
/*
* 【新增】：在v1.0.1版本中新增了devServer的配置，用自帶的代理就可以訪問介面
* npm install [email protected] 安裝好後，啟動完可以快速跟隨你後端的改變前端自動改變
* 啟動：webpack-dev-server --inline --port 8088
* 如何訪問：當專案啟動會有供一個路徑，我們根據路徑訪問則可以
* 相當於:
* if('dev'=='WEBPACK_ENV'){
* config.entry.common.push('webpack-dev-server/client?http://localhost:8088/')
* }
*/
devServer: {
port: 8088,
inline: true,
proxy: {
'**/*.do': {
target: 'http://test.happymmall.com',
changeOrigin: true
}
}
}
};
module.exports=config;