【webpack學習筆記】a04-創建開發環境

開發環境就是在開發過程當中爲了方便配置的環境，生產環境就是開發完成即將上線的狀況。
好了，說了句廢話，切入正題。

---

在開發時，打包後的文件壓縮成一團，報錯調試的時候傻眼了有木有？每次作出修改須要到瀏覽器查看效果的時候，都要手動npx webpack或者npm run build手動進行打包，耗時又費勁有木有？

用幾個工具配置開發環境（不能用於生產環境）解決這個問題：

source map

source map 能夠將編譯後的代碼映射回原始源代碼

截個官方圖：

更多查看這裏

具體用法：

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        print: './src/print.js',
        app: './src/index.js'
    },
    output:{
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'inline-source-map'  //這裏可配置各類選項
    plugins:[    
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: './src/index.html',
            inject: 'body'
        })
    ]
};

---

webpack Watch && webpack-dev-server

webpack Watch(觀察模式)能夠解決每次修改後都要手動命令打包的問題，修改完後直接在瀏覽器中刷新就能夠查看。
若刷新都懶得刷新，想一修改就看到結果怎麼辦？那就用webpack-dev-server.

webpack-dev-server提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)

webpack Watch(觀察模式)直接在package.json文件中直接配置就好，配置完後直接在命令行運行npm run watch就能夠觀察模式，但webpack-dev-server還須要安裝一下，咱們看下例子：

npm install --save-dev webpack-dev-server

package.json

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        print: './src/print.js',
        app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
        //在這裏告訴webpack-dev-server,將 dist 目錄下的文件，做爲可訪問文件
        contentBase:'./dist'   
    },
    plugins:[  
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    output:{
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

配置好後，命令行運行npm start,就能夠開啓懶得刷新的懶人模式。

---

踩坑記錄：

在學習官方文檔，也就是webpack-dev-server這一部分的時候踩了一個坑，當時在配置好webpack.config.js和package.json後，運行命令npm start成功，沒有報錯，可是瀏覽器控制檯卻報404，頁面中也顯示"Cannot GET".
查看後發現，個人dist目錄並無打包出來。

這是我當時的配置文檔：

問題就出現紅框勾出來的地方，當時我配置了清理dist目錄，只要註釋掉就能夠正常運行了。 還有就是這時候輸出的文件名最好不要配置hash值，不然也會出現找不到文件的狀況。 其實清理dist目錄和配置文件hash值都是用於生產環境，在開發環境去掉了也不會有影響。