記錄一下前端開發的傳統環境配置

一、檔案結構

二、webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: 
 
/\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    
 
//小於8kb會採用base64編碼格式儲存圖片
                    //減少了請求數量，減輕伺服器壓力
                    limit: 8 * 1024,
                    // 給圖片進行重新命名
                    // [hash:10]取圖片的hash的前10位
                    // [ext]取檔案原來副檔名
                    name: '[hash:10].[ext]',
                    // 問題：因為url-loader預設使用es6模組化解析，而html-loader引入圖片是commonjs
 

                    // 解析時會出問題：[object Module]
                    // 解決：關閉url-loader的es6模組化，使用commonjs解析
                    esModule: false,
                    outputPath: 'imgs'
                }
            },
            {
                //處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                // 處理其他資源
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        /*
            這裡注意DevServer通過HTTP服務暴露出的檔案分為兩類：
                暴露本地檔案。
                暴露Webpack構建出的結果，由於構建出的結果交給了DevServer，所以你在使用了DevServer時在本地找不到構建出的檔案。
            contentBase只能用來配置暴露本地檔案的規則，可以通過contentBase:false來關閉暴露本地檔案。
        */
        contentBase: resolve(__dirname, 'build'),
        compress: true, //採用gzip壓縮
        port: 3000,
        open: true //啟動後預設開啟瀏覽器
    }
};

三、執行指令

// npx是npm5.2之後釋出的一個命令，執行流程如下：

// 1. 去node_modules/.bin路徑檢查npx後的命令是否存在，找到之後執行；

// 2. 找不到，就去環境變數$PATH裡面，檢查npx後的命令是否存在，找到之後執行;

// 3. 還是找不到，自動下載一個臨時的依賴包最新版本在一個臨時目錄，然後再執行命令，執行完之後刪除，不汙染全域性環境。

//比如 npx create-react-app my-react-app，npx 將create-react-app下載到一個臨時目錄，使用以後再刪除。

//每次執行這個命令，都會重新下載依賴包，執行後刪除。

npx webpack-dev-server