webpack.config.js和package.json

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)