webpack开发者模式的兼容处理

女爷i 2022-12-12 15:05 162阅读 0赞

## webpack开发者模式的兼容处理 ##

与生产者模式百分八十都相同  
开发者模式在package,json下面的scripts下面添加

> 开发模式  
> 大多数的配置都是差不多的，只有少部分的配置是不一样的
> 
> 1.  关于CSS的配置，它不需要进行分离了，直接使用 style-loader 插入到页面的 style 标签中去
> 2.  关于图片与字体，它不用再做limit的限制了，它全部转base64直接展示
> 3.  它需要使用 webpack-dev-server 来启动一个服务器调试页面
> 4.  它可以配置热模块替换

"dev": "webpack-dev-server --config ./webpack.config.dev.js"

"scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config ./webpack.config.js",
        "dev": "webpack-dev-server --config ./webpack.config.dev.js"
      },

//首先要导入一个包  
`yarn add webpack-dev-server --dev`

//开发者模式下面的webpack配置
    const path = require("path");
    const HtmlWebpackPlugin=require("html-webpack-plugin");
    const { CleanWebpackPlugin}=require("clean-webpack-plugin");
    const ProgressBarWebpackPlugin=require("progress-bar-webpack-plugin")
    const chalk=require("chalk");
    //导入webpack插件，配置热模块替换
    const webpack=require("webpack");
    
    
    const config = { 
        mode: "development",
        entry: path.join(__dirname, "./js/Student.js"),
        output: { 
            filename: "bundle.js",
            path: path.join(__dirname, "./dist")
            //这里不能配publicPath，开发者模式不允许配置这个
        },
        module: { 
            rules: [{ 
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }, { 
                test: /\.css$/,
                use: [
                    //在开发者模式下面，是不需要进行css样式分离的，所以不用调用分离的插件
                    //而直接应该插入在style标签中
                    "style-loader",
                    { 
                        loader: "css-loader",
                        options: { 
                            importLoaders: 1
                        }
                    },
                    "postcss-loader"
                ]
            }, { 
                test: /\.s(c|a)ss$/,
                use: [
                    //在开发者模式下面，是不需要进行css样式分离的，所以不用调用分离的插件
                    //而直接应该插入在style标签中
                    "style-loader",
                    { 
                        loader: "css-loader",
                        options: { 
                            importLoaders: 1
                        }
                    },
                    "postcss-loader",
                    "sass-loader"
                ]
            }, { 
                test: /\.(jpe?g|gif|png|bmp|svg|ico|tif)$/,
                use: [
                    //在开发者模式下面，不需要考虑是否转换成文件或base64，全部调用base64
                    "url-loader"
                ]
            },{ 
                //解析bootstrap的字体
                test: /\.(ttf|eot|woff|woff2)$/,
                use: ["url-loader"]
            }
    
            ]
        },
        plugins: [
            //清理内容插件
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({ 
                filename:"index.html",
                template:path.join(__dirname,"./index.html"),
                inject:true
            }),
            new ProgressBarWebpackPlugin({ 
                format:chalk.green("进度:")+chalk.red("[:bar]")+chalk.green(" :percent")+chalk.red(" :plapsed seconds"),   //(:elapsed seconds)耗得时间 percent百分比 [:bar]进度条
                clear: false                    //不清除进度条
            }),
            //根据名称进行模块替换
            new webpack.NamedModulesPlugin(),
            //热模块替换插件
            new webpack.HotModuleReplacementPlugin(),
            //配置全局别名
            new webpack.ProvidePlugin({ 
                "jquery":"jquery",
                "$":"jquery",
                "jQuery":"jquery"
            }),
        ],
        //配置服务器webpack-dev-server
        devServer:{ 
            port:9999,   //端口号
            contentBase:"./dist",    //生成的文件放在dist文件下面
           //配置成功以后直接打开浏览器
            open:true,
            // 开启热模块替换
            hot:true
        }
    }
    module.exports = config;

#### 热模块替换 ####

先导入webpack  
在配置服务器里面加个`hot：true`  
在插件里面添加

> //根据名称进行模块替换  
> new webpack.NamedModulesPlugin(),  
> //热模块替换插件  
> new webpack.HotModuleReplacementPlugin(),

## 配置全局别名 ##

new webpack.ProvidePlugin({
            "jquery":"jquery",
            "$":"jquery",
            "jQuery":"jquery"
        }),

当配置完上面的东西以后，我们就可以直接使用jQuery以及jQuery的第三方插件了

import $ from "jquery"; // 根据bootstrap的package.json配置，导入的是dist/js/npm.js 
    import "bootstrap";
     import "bootstrap/dist/css/bootstrap.css";