前端开发--webpack--开发环境配置

记录一下前端开发中webpack的传统开发环境配置

一、文件结构

二、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