webpack是基於node的，所以寫法采用commonjs
let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:''相對路徑 入口文件
output:{打包后文件
filename:文件名
path:必須是絕對路徑path.resolve('./dist')
},
module:{各文件類型用的loader
rules:[
{test:匹配文件類型正則,use:字符串或數組 使用哪些處理器: ,exclude:排除文件的正則},
//先安裝在配置，安裝時默認是dependencies，加了--save-dev才是devDependencies
]
},
plugins:[
new HtmlWebpackPlugin({//該插件功能是打包js入口文件時，以該html作為模板，將打包后的js插入該模板，將html文件輸出到輸出目錄中
template:''根html文件路徑
filename:html文件名
})
],
devtool:'cheap-module-source-map',//debug時可以查找到相應js 而不是打包后的js
devServer: {
historyApiFallback: true,//允許熱更新時 解決history路徑的刷新失敗
}
}
只有chrome高版本才支持es6語法,所以webpack需要預編譯js文件成es5語法，安裝
babel-core babel-loader babel-preset-es2015 babel-preset-stage-0
解析es6和es7語法
並且在項目中加上.babelrc文件，內容為{
"presets": ["es2015","stage-0","react"]
}
-----------------------------------------------------------------------
package.json中配置項目啟動,
start項運行時可以省略run,
dev執行webpack 是編譯打包用於上線，
build執行webpack-dev-server 是啟動webpack的服務器，打包后的代碼在內存中，不會輸出到項目目錄，同時具有熱更新的功能。
可選配置項：
--content-base //設定webpack-dev-server的director根目錄。如果不進行設定的話，默認是在當前目錄下。 --quiet: //控制台中不輸出打包的信息，開發中一般設置為false，進行 打印，這樣查看錯誤比較方面 --no-info: // 不顯示任何信息 --colors: //對信息進行顏色輸出 --no-colors: //對信息不進行顏色輸出 --compress: //開啟gzip壓縮 --host <hostname/ip>: //設置ip --port <number>: //設置端口號，默認是:8080 --inline: //webpack-dev-server會在你的webpack.config.js的入口配置文件中再添加一個入口, --hot: //開發熱替換 --open: //啟動命令，自動打開瀏覽器 --history-api-fallback: //查看歷史url
--config 新的配置文件名 //使用新的配置文件打包
------------------------------------------------------------------------------------------------------------------------------
附源碼：
let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
path:path.resolve('./dist')
},
module:{
rules:[
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
{test:/\.vue$/,use:'vue-loader'},
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.(svg|eot|woff2|ttf|woff|png|gif|jpg)/,use:'url-loader'},
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html'
})
]
}
{
"name": "vue-load",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.2"
},
"dependencies": {
"bootstrap": "^3.3.7",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
}
}
較全面的安裝包：
## 后端依賴的模塊 ``` npm install body-parser connect-mongo ejs express express-session mongoose -S(--save的縮寫) ``` ## react前端依賴的模塊 ``` npm install react react-dom react-redux redux redux-thunk redux-promise redux-logger react-router-dom react-router-redux history
選裝:react-transition-group動畫 react-swipe swipe-js-iso 輪播圖 es6-promise whatwg-fetch -S ```
## 開發依賴模塊 ``` npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 file-loader url-loader less less-loader css-loader style-loader webpack webpack-dev-server html-webpack-plugin -D ```(--save-dev的縮寫)
(url-loader用於處理圖片 需要依賴file-loader)