webpack环境搭建

本地服务器

$_> npm i -D webpack-dev-server

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugins = require('clean-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        util: './src/util.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/[name].bundle.js',
    },
    module: {
        rules: [{
            test: /\.(css)$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(jpeg|png|jpg)$/,
            use: {
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/imgs/',
                }
            }
        }, {
            test: /\.(html)$/,
            use: { loader: 'html-loader' }

        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/html/index.html',
            inject: 'body',
            chunks: ['index']
        }),
        new cleanWebpackPlugins(['dist'])
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'), // 根路径
        port: 8080,
        historyApiFallback: {}, //访问不存在的路径不会报错，单页应用 
        proxy: { // 设置代理，跨域
            '/api': { // http://localhost:8080/api
                target: 'http://localhost:8080', // 请求的域名
                changeOrigin: true,
                secure: false,
                logLevel: 'debug', // 控制台打印日志
                headers: {}, // http头部
            }
        }
    },
    mode: 'development'
};

// package.json
"scripts":{
   "server": "webpack-dev-server --open"
}
$_> npm run server

模块热更新

不用刷新即可更新某部分

$_> npm i -D webpack-dev-server

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

module.exports = {
    entry: {
        index: './src/index.js',
        util: './src/util.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/[name].bundle.js',
    },
    module: {
        rules: [{
            test: /\.(css)$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(jpeg|png|jpg)$/,
            use: {
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/imgs/',
                }
            }
        }, {
            test: /\.(html)$/,
            use: { loader: 'html-loader' }

        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/html/index.html',
            inject: 'body',
            chunks: ['index']
        }),
        new cleanWebpackPlugins(['dist']),
        new webpack.NamedModulesPlugin(), 
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'), 
        port: 8080,
        hot: true, 
    },
    mode: 'development'
};

直接修改index.js css即可更新

source-map

可以看到未被打包的源文件，方便定位bug

js: 需开启本地服务器
css

   module: {
        rules: [{
            test: /\.(css)$/,
            use: [{
                loader: 'style-loader',
                options: {
                    sourceMap: true
                }
            },
            {
                loader: 'css-loader',
                options: {
                    sourceMap: true
                }
            }
            ]
        }, {
            test: /\.(jpeg|png|jpg)$/,
            use: {
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/imgs/',
                }
            }
        }, {
            test: /\.(html)$/,
            use: { loader: 'html-loader' }

        }]
    },

区分开发环境和线上环境

开发环境不需要压缩代码，生成环境需要，所以有必要分别配置

• 使用webpack-merge 合并配置对象。如果是发布环境，就修改配置

// webpack.config.js
let isProduction = false; //是否发布环境

let baseConfig = {
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    module: {

    },
    plugins: [
        new webpack.DefinePlugin({  // 全局变量，在项目里的js都可以访问到
            isProduction: isProduction
        })
    ],

    mode: isProduction ? 'production' :'development',
    devtool: isProduction?'':'inline-source-map',
};


if (isProduction) { // 如果是发布环境就处理js
    baseConfig = merge(baseConfig,{ //
        module: { 
            rules:[{
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }]
        }
    })
} 

module.exports = baseConfig;