webpack入门

安装插件

    webpack webpack-cli //基础包
    webpack-dev-server  //给开发环境提供一个web服务器

配置打包命令

package.json
"scripts": {
    "build": "webpack --config webpack.config.js --mode=production",
    "dev": "webpack serve"
}

entry 入口

    module.export = {
        // 重点
        entry: {
            main: './src/index.js'
        }
    }

output 出口

     module.export = {
        entry: {
            main: './src/index.js'
        }，
        // 重点
        output: {
            path: path.resolve(__dirname, 'dist'), // 输出到硬盘的路径
            filename: 'bundle.js',
            publicPath: '/'  // 静态资源前缀路径
        }
    }

配置loader

     module.export = {
        entry: {
            main: './src/index.js'
        }，
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        // 重点
        module: {
            rules: [
                {
                    test: /\.txt$/,
                    use: 'raw-loader'
                }
            ]
        }
    }

配置plugin

     module.export = {
        entry: {
            main: './src/index.js'
        }，
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.txt$/,
                    use: 'raw-loader'
                }
            ]
        },
        // 重点
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
    }

区分环境

1.--mode 设置process.env.NODE_ENV环境

2.--env 设置webpack配置文件参数

3.cross-env 设置node环境的process.env.NODE_ENV

4.DefinePlugin 设置模块内的全局变量

mode 两种模式

1. development 开发环境
    --mode=development
    会将process.env.NODE_ENV设置为 development
 
2. production 生产环境
    --mode=production
    会将process.env.NODE_ENV设置为 production

env

1.--env=development

2.--env=production

wepack.config.js 文件需要导出一个方法就能拿到env数据

mudule.export = (env, args) => {
    // 重点
    const environment = env.development ? 'development' : 'production'
    return {
        mode: environment,
        entry: {
            main: './src/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.txt$/,
                    use: 'raw-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
  }
}

DefinePlugin

    const webapck = require('webpack');
    
    mudule.export = (env, args) => {
    const environment = env.development ? 'development' : 'production'
    console.log(env)
    
    return {
        mode: environment,
        entry: {
            main: './src/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.txt$/,
                    use: 'raw-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            // 重点
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(environment),
                'NODE_ENV': JSON.stringify(environment)
            })
        ]
  }
}

cross-env

npm install cross-env -D

cross-env NODE_ENV=development

可以在webpack.config.js中获取process.env.NODE_ENV

    const webapck = require('webpack');
    
    mudule.export = {
        // 重点
        mode: process.env.NODE_ENV
        entry: {
            main: './src/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.txt$/,
                    use: 'raw-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            })
        ]
  }

开发服务器配置 devServer

npm install webpack-dev-server

    const webapck = require('webpack');
    
    mudule.export = {
        // 重点
        mode: process.env.NODE_ENV
        entry: {
            main: './src/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        // 重点
        devServer: {
            publicPath: '/', //静态资源前缀
            contentBase: path.resolve(__dirname, 'public'), //其他静态资源的前缀路径
            port: 8080, //默认端口
            open: false, // 启动开发服务的时候自动打开浏览器
            compress: true // 是否启用压缩  gzip
        },
        module: {
            rules: [
                {
                    test: /\.txt$/,
                    use: 'raw-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            })
        ]
  }