webpack的生产模式与开发模式详情

最新推荐文章于 2023-05-03 17:12:05 发布
最新推荐文章于 2023-05-03 17:12:05 发布
阅读量1.1k 收藏 4
点赞数 6
分类专栏： webpack 文章标签： webpack 前端 javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_Edison/article/details/115254649
版权

文章目录

1.webpack简介

1.1 ~是什么

本质上，Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(Dependency Graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

在webpack看来，前端的所有资源文件（js、css、img、json…）都会作为模块处理。然后会根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

1.2 基本的五个概念

在学习之前我们必须先要搞明白webpack的五个基本核心概念：

entry：

口指示webpack以哪个文件为入口起点开始打包，分析构建内部的依赖图。

output：

输出指示 webpack打包后的资源bundles输出到哪里去，以及如何命名

Loader：

让webpack去处理非JavaScript资源的文件，比如css、img等，将他们可以处理成一个webpack可以识别的资源，可以理解成一个翻译的过程。（webpack自身只能理解json和js）

plugins：

插件可以用来执行更加广的任务，插件的范围包括打包优化和压缩

mode：

模式指示webpack使用相应模式的配置。
开发模式（development）：配置比较简单，能让代码本地调试运行的环境。
生产模式（production）：代码需要不断优化达到性能最好。能让代码优化上线运行的环境。
都会自动启用一些插件，生产模式使用插件更多

1.3 安装

首先需要确定有node环境

接着全局下载webpack

npm i webpack webpack-cli -g

注意：在项目中安装还需要本地安装

2.webpack开发环境基本配置

2.1 简单使用webpack打包js文件

首先创建src、build目录，在src创建js文件，并写入es6的代码。

然后使用分别使用以下命令编译查看结果：

webpack ./src/index.js -o ./build/ --mode=development  //开发环境下
webpack ./src/index.js -o ./build/ --mode=production  //生产环境下

并且常识打包css文件，结果发现会报错，因此我们可以得出以下三个结论：

  1. webpack可以处理js\json文件，但是不可以处理img\css等文件，要想处理需要使用Loader
  2. 生产环境和开发环境都可以将ES6模块化编译成浏览器可以识别的代码
  3. 生产可以将js代码压缩

2.2 webpack.config.js文件

这时webpack的配置文件，一般与src文件同级

作用是只是webpack干什么干什么，怎样干，一般在执行webpack命令时，会加载里面的配置。

因为前面说到构建工具是基于node环境的，因此我们这里的模块化采取common.js

下面是一个webpack.config.js的模板：


const path= require('path');
module.exports={
    // 入口起点
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        path:path.resolve(__dirname,'build')
    },
    // loder配置
    module:{
        rules:[
            // 详细的loder配置
        ]
    },
    // plugins配置
    pligins:{
        // 详细的pligins配置
    },
    // 开发模式
    mode:'development'
}

2.3 打包样式资源css/less/sass…

由上文知道我们打包除js/json以外文件需要添加loader操作

因此我们在处理样式文件时需要下载必须的两个插件： 'style-loader', 'css-loader'

因为less与sass文件最终都是要转为css文件的，如果打包这些文件在下载相应的loader即可。

 // loder配置
    module: {
        rules: [
            // 详细的loder配置
            // css打包处理
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // less打包处理
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }

        ]
    },

注意：

  1. use数组中的loader执行顺序是从右向左，从上向下依次执行（顺序不可颠倒）
  2. style-loader：创建style标签，将js中的样式资源插入进去，添加到head中使用
  3. css-loader：将css文件变为common模块加载在js中

2.3 打包html资源

打包hmtl资源需要使用plugins插件来进行。

插件的使用流程与loader不同，顺序是下载、导入、使用。而loader是下载、使用

首先我们下载html-webpack-plugin插件。

然后导入：

const Htmlwebpackplugin = require('html-webpack-plugin');

接在在plugins数组中操作即可：

  plugins:[
        new Htmlwebpackplugin({
            //复制其资源到build，并自动引入打包输出所有资源
            template:'./src/index.html'
        })
    ],

此插件的功能是默认在build文件夹中创建一个html文件，自动引入相应的css、js资源文件

2.4 打包图片资源

打包图片资源需要添加loader：url-loader，file-loader（url-loader的依赖包）

也可以设置option内容，优化图片格式，在范围内的图片压缩为base64格式减少服务器请求次数。

 {
    test:/\.(jpg|png|gif)$/,
    loader:'url-loader',
    options:{
             limit:120*1024
            }
 },
 {
    test:/\.html$/,
    loader:'html-loader'
 }

html-loader是用来处理html文件的img图片（负责引入img，从而可以内url-loader进行处理）

2.5 打包其他资源

其他资源一般是指除js、css等常规资源等以外的资源。比如iconfont等。我们这里使用iconfont来举例说明

我们只需要引入url-loader在进行配置即可

  // 打包其他资源
            {
                exclude:/\.(css|html|js)$/,
                loader:'url-loader'
            }

2.6 使用dev-server

webpack为我们提供了用于实时刷新自动编译的服务器。这个服务器的特点是不会有输出，只会在内存中编译打包，服务关闭，内存中的相应数据也会销毁。

这里的用法是先本地下载webpack-dev-server包

然后再webpack.config.js 中进行配置。

	devServer:{
        // 项目构建后的路径
        contentBase:path.resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 设置端口号
        port:3000,
        // 启动后是否自动打开浏览器
        open:true
    }

注意:webpack5.X以上版本启动服务器需要使用命令

npx webpack serve

2.7.开发环境的基本配置

其实开发环境的配置就是将我们前面所讲的打包各种资源全部结合起来。

需要注意的是开发环境配置是可以让代码运行的。

运行代码的指令：

webpack：打包输出到目标文件

npx webpack serve：只会在内存中编译打包

下面我们直接上配置文件的代码：


const path = require('path');
const Htmlwebpackplugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // 打包css
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
             // less打包处理
             {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            //打包图片资源
            {
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:120*1024,
                    name:'[name].[ext]',
                    outputPath:'image'
                }

            },
            {
                test:/\.html$/,
                loader:'html-loader',
            },
            // 打包其他资源
            {
                exclude:/\.(css|html|js)$/,
                loader:'url-loader',
                options:{
                    name:'[name].[ext]',
                    outputPath:'media'
                }
            }
        ]
    },
    plugins: [
        new Htmlwebpackplugin({
            template:'./src/index.html'
        })
    ],
    mode: 'development',
    // devserver
    devServer:{
        // 项目构建后的路径
        contentBase:path.resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 设置端口号
        port:3000,
        // 启动后是否自动打开浏览器
        open:true
    }
}

3.webpack生产环境基本配置

​ 生产环境是项目上线时需要采用的，为了让我们的代码更快更平稳。下面让我们一点点的学习生产环境的基本配置。

5.1 提取css成单独文件

我们再开发环境下时，处理css样式文件是通过标签字符串的方式进行引入的，这样无疑增加了js标签渲染的压力，也可能会出现闪屏的可能。因此我们要想办法将css提取成单独的文件。

首先我们先捋一下思路。原本处理css文件的两个步骤时先使用css-loader帮我们分析出各个css文件之间的关系，把各个css文件合并成一段css；再使用style-loader将其挂载再我们的style上

因此我们这里第一步不变，第二步引入插件mini-css-extract-plugin生成单独的css文件。思路清晰后我们直接写代码

引入插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

使用插件自带的loader：

 {
                test:/\.css$/,
                use:[
                    // 'style-loader',
                    // 替换为抽离css的loaderr
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
 }

使用插件（设置文件输出位置）：

  plugins:[
        new MiniCssExtractPlugin({
            filename:'css/build.css'
        })
    ],

5.2 css兼容性处理

首先我们需要安装两个loader：postcss-loader和postcss-preset-evn。

npm i postcss-loader postcss-preset-env -D

再package.json中添加如下配置：

  "browserslist":{
    "development":[
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production":[
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

再webpack.config.js文件：

const path = require('path');
const Htmlwebpackplugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置nodejs的环境变量
// process.env.NODE_ENV = 'development'
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 修改postcss-loader的默认配置
                    /* 
                    帮postcss找到package.json中的broswerslist里面的配置,通过配置加载指定的css兼容性
                    */      
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions:{
                                ident: 'postcss',
                                plugins: [
                                    require('postcss-preset-env')()
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new Htmlwebpackplugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/build.css'
        })
    ],
    mode: 'development'
}

需要注意的是要想再开发环境下进行打包处理需要使用如下代码来配置nodejs的环境变量：

 process.env.NODE_ENV = 'development'

5.3 压缩css

需要引入插件optimize-css-assets-webpack-plugins(这里使用cnpm引入插件。npm无法引入)

最后直接引入插件实例化即可。

 cnpm i optimize-css-assets-webpack-plugin -D

使用方法：

const Optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin');
   plugins: [
        new Optimizecssassetswebpackplugin()
 ],

5.4 js语法检查eslint

首先应该下载eslint-loader和eslint对我们js进行检查。

其次就是添加检查规则，我们这里使用GitHub上有名的语法规则指南airbnb。

需要下载三个插件eslint-config-airbnb-base、eslint-plugin-import和eslint

cnpm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

接配置loader：

module: {
        rules: [
            {
                test:/\.js$/,
                exclude:'/node_modules/',
                loader:'eslint-loader',
                options:{
                    // 自动修复错误
                    fix:true
                }
            }
        ]
    }

最后再package.json中给eslint配置继承airbnb语法

  "eslintConfig": {
    "extends": "airbnb-base"
  }

即可。

5.5 js兼容性处理(使用babel)

当我们再处理js代码时，使用es6语法时，webpack时不会将es6进行编译的，这就导致了ie等旧版浏览器无法识别es6的代码，因此我们需要再编译的时候直接将es6代码进行编译成es5的代码。

首先我们需要两个三个基础包：

babel-loader

@babel/preset-env

@babel/core

其实这三个包下载好以后我们配置一个babel-loader就可以完成对简单es6语法的编译。但是对于稍微复杂的语法，比如promise等就无法完成编译。一次我们还要引入以下包：

此外我们还需要兼容一些复杂的es6功能，就有需要我们下载一个包：

core-js。

注意:这里引入建议都是使用cnpm引入

配置webpack.config,js文件:

  module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns:'usage',
                                corejs:{
                                    version:3
                                },
                                // 指定兼容性浏览器
                                targets:{
                                    chrome:'70',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10',
                                    edge:'17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }

完成以后我们就可以将es6的语法自动编译成我们浏览器可以识别的语法啦！

5.5 压缩html与js代码

前面说到webpack自身是理解js和json的。因此我们在压缩js代码时只需要将mode改为生产环境下即可。

在webpack5以前我们压缩js代码还要需要在html-webpack-plugin插件中设置一些配置，但是在webpack5以后这些都不需要配置，因为在生产环境下webpack都会为我们处理好。

因此只需要更改wenpack.config.js中的mode值即可：

mode: 'production'

5.6 生产环境的基本配置

源码：

	const path = require('path');
const Htmlwebpackplugin = require('html-webpack-plugin');
const Minicssextractplugin = require('mini-css-extract-plugin');
const Optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin');
// 是否在开发环境下执行
// css/less文件处理浏览器兼容的复用抽离:
module.exports = {
    entry: "./src/js/index.js",
    output: {
        filename: 'js/built.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // 提取css成单独文件+css兼容性处理(适配浏览器)
            {
                test: /\.css$/,
                use:
                    [
                        Minicssextractplugin.loader,
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    ident: 'postcss',
                                    plugins: [
                                        require('postcss-preset-env')()
                                    ]
                                }
                            }
                        }
                    ]
            },
            // 处理less成单独文件
            {
                test: /\.less$/,
                use: [
                    Minicssextractplugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                ident: 'postcss',
                                plugins: [
                                    require('postcss-preset-env')()
                                ]
                            }
                        }
                    },
                    'less-loader'
                ]
            },
            //eslint语法检查
            {
                test: /\.js$/,
                // 优先执行
                exclude:/node_modules/,
                enforce: 'pre',
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            },
            //js兼容性处理
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性浏览器
                                targets: {
                                    chrome: '70',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },
            //图片加载
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    outputPath: 'image',
                    esModule: false
                }
            },
            //  处理html中的图片 
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            // 处理其他资源
            {
                exclude: /\.(less|css|html|js|jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins: [
        new Htmlwebpackplugin({
            template: './src/index.html'
        }),
        new Minicssextractplugin(   {
            filename: 'css/build.css'
        }),
        // 压缩css样式
        new Optimizecssassetswebpackplugin()
    ],
    mode: 'production'
}

package.json配置：

 "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "core-js": "^3.9.1",
    "css-loader": "^5.1.4",
    "eslint": "^7.22.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^1.3.9",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.27.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }

4.webpack优化配置

webpack优化分为开发环境优化和生产环境优化

开发环境优化：优化打包速度，优化代码调试

生产环境优化：优化打包速度，优化代码运行的性能

后续更新，提上日程。。

小牲口online
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Webpack开发环境配置
Sixology的博客
08-10 250
Webpack开发环境配置 1.运行指令 开发环境：webpack ./src/index.js -o ./bulid/build.js --mode=development webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js,整体打包环境是开发环境 生产环境：webpack ./src/index.js -o ./bulid/build.js --mode=production webpack 会以 ./src/
Webpack5学习笔记（基础篇五）—— mode之Development环境相关参数配置
MRlaochen的博客
12-26 2844
在Webpack5中，mode（模式）有三种： development（开发环境模式） production（生产环境模式） none或' '（空） 在不同模式中，我们可能对于webpack.config.js配置文件进行不同参数的设置 比如，在development开发环境中，我们可能使用devTool，devServer等对webpack打包后的代码进行浏览器调试；在production生产环境中，我们可能在optimization配置下面的minimizer中使用CssMinimizerPlugi
和webpack有关
hanmou77的博客
04-16 505
安装webpack遇到的一些问题MAC 第一步$ sudo -s 原因分析是：在mac下依赖包要写入系统重要文件夹里，由于没有先获取root权限所以写入失败，导致安装失败。mac 还有一步操作就是，终端先执行如下命令npm install --save-dev webpack -g 输入以上命令后: webpack -v 提示:The CLI moved into a separate packa...
WebPack
wj18740503137的博客
06-21 298
Webpack 是一个模块打包器 (bundler)，本身是一个工具。 https://webpack.docschina.org/在 Webpack 看来，前端所有的静态资源文件都是模块，如 JS / JSON / CSS / IMG / LESS / FONTS 等等，这些文件都会作为模块来处理。Webpack 会根据模块之间的依赖关系，进行分析打包，生成最终的静态资源。Webpack 有五个核心的概念需要知道，分别是入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建
webpack 合作开发模式初探（一）
plyshishabi的博客
08-08 555
一，背景知识 1，webpack。2，react。 二，正文 目前react＋webpack已经成为了很多公司前端架构的选择。前端采用react的优点是模块可服用程度高，异步刷新，合作方便等。webpack打包可以让我们省去压缩，编译等工作，安心写代码。 但是据我目前实践看来，webpack打包模式还是有一些坑的，这里我就据我踩的一些坑探索一下什么是webpack＋react最佳工作模式
一个自己写的webpack单入口demo支持开发模式和生产模式两种方式
08-11
**开发模式与生产模式**： Webpack 提供了两种运行模式：开发模式（development）和生产模式（production）。开发模式下，Webpack 提供更快的编译速度和实时重载功能，便于开发者快速迭代。而生产模式则会进行更深度...
webpack中的模式(mode)使用详解
10-15
`mode` 提供了两种预设的值，即 `development` 和 `production`，它们分别对应开发环境和生产环境的优化策略。 1. **development** 模式 - 在 `development` 模式下，Webpack 会自动将 `process.env.NODE_ENV` 的...
基于打包工具Webpack进行项目开发实例
12-08
在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器,基予ADM(async module define)规范实现,browserify是一个以在浏览器中使用Node.js模块为出发点的工具,而webpack则是一...
利用webpack搭建前端开发环境
08-07
通过配置 `mode`（生产模式或开发模式），Webpack 可自动进行优化，例如删除未使用的代码（tree shaking）和压缩输出。 10. **部署与生产环境** 生产环境构建时，通常会使用 `--mode=production` 参数，开启额外...
WebpackVue开发多页面项目环境
08-10
9. **开发环境与生产环境**：在开发环境中，我们可能需要热重载、源码映射等功能；而在生产环境中，我们需要优化和压缩代码。Webpack 配置通常会有两套，分别针对这两种环境。 10. **部署**：多页面项目在部署时，...
webpack基本配置、开发者模式介绍
m0_68997646的博客
10-31 251
webpack基本配置、开发者模式介绍
npm开发模式和生产模式
Pert的博客
10-27 2191
说说对npm的开发模式和生产模式的理解 大前端 nodejs这些年的发展非常快，相信没有哪个前端不知道的了，npm也成为了前端开发中经常用到了的一个命令。那么npm不是只用一个 "npm install xxx"命令就够了吗？实际上并不是这样，发现有些团队在使用npm的时候没有认真去搞懂npm在团队里面或者说是在项目里面的一些用法。 1.从认识package.json开始 **　　在团队里面开发，一般会分为开发模式和生产模式（可能会有不同的叫法），有时候还有测试模式，那么这些模式其实跟npm有很大的联系的.
webpack-mode
yy869949908的博客
10-17 294
webpack打包报错 问题： 在webpack执行打包的时候，可以正常打包，但是会出现红色警告。 yarn build 或者 webpack 报错信息如下： 解决1： 在项目跟目录创建webpack.config.js 文件 在文件中加入代码即可 module.exports = { mode: 'production', } 解决2： 在项目跟目录找到package.json 文件 修改代码 "scripts": { "build": "webpack" }, 为 "script
01_Webpack基础（开发模式）
zyq的博客
05-03 333
开发模式：仅能编译 JS 中的ES Modle语法生产模式：能编译 JS 中的ES Modle语法，和压缩 JS 代码。
Struts 2 – Development mode example
qq_31230529的博客
09-15 363
In Struts 2 development, this should be the first configurable value to learn. To enable the Struts 2 development mode, you can significantly increase your Struts 2 development speed by giving auto con
Webpack系列——不同模式的打包
Smart_J_King的博客
01-12 317
Development 和 Production 模式的区分打包 在不同模式下的配置上，存在着大量相同的代码，对于这些重复代码可以将它们分离出来共用，提高代码效率。 1.webpack-merge 插件安装： npm install webpack-merge -D 这个插件可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就可以节约大量代码的书写。 (1)共用配置 新建一个文件 webpack.common.config.js （文件名可以自己起），用于编写共
Webpack mode三种模式配置说明（production，development，none）
Czuaphe的博客
04-06 1万+
我们都知道webpack的配置文件 webpack.config.js 文件中 mode 表示webpack当前的环境以及对不同的环境的配置。虽然官方文档写明了三种不同的模块的配置，但是没有具体说明是什么意思，我就注释一下对应的模块到底进行了什么操作。 development（开发模式） 下面是从官方上得到的开发模式的全部配置， // webpack.development.config.js m...
(一)Webpack介绍小白入门四种打包方式
Bioye_的博客
06-09 1088
Webpack 第 1 章：webpack 简介 1.1webpack是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在weboack看来前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理. 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 1.2 webpack 五个核心概念 Entry 入口(Entry)指示 webpack 以哪个文件为入口起点开始打 包，分析构建内部依赖
解决webpack本地开发环境无法用IP访问
热门推荐
xiaoping_1988的博客
11-29 1万+
问题描述:只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问解决方案:webpack dev配置文件中加上 host:’0.0.0.0’
webpack设置为开发模式
最新发布
08-20
要将webpack设置为开发模式，你可以在配置文件中设置`mode`属性为`development`。在webpack.config.js文件中，可以添加以下代码： ```javascript module.exports = { mode: "development", // 其他配置项... }; ``` 这将告诉webpack将项目设置为开发模式，以便在构建过程中进行更多的调试和开发工具的支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值