webpack开发配置（webpack.base.js/webpack.dev.js/webpack.prod.js）

最新推荐文章于 2024-05-16 16:23:10 发布
最新推荐文章于 2024-05-16 16:23:10 发布
阅读量1.8w 收藏 17
点赞数 5
分类专栏： 1.5 webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingov/article/details/77278550
版权

源代码 https://github.com/kingov/webpack-learning

项目初始结构分析

通常项目会分成三个运行环境：开发人员在本地跑的开发环境(dev)、测试人员用来做黑盒测试的测试环境(test)和线上运行的生产环境(production)。
简单起见，本文只考虑开发环境(dev)和生产环境(prod)，测试环境可以自行类比。
综上，webpack的配置需要有两套，同时两套配置必然会存在相同的部分，故新建目录与文件如下图：
这里写图片描述
同时引入一个库webpack-merge用于合并base config和特定环境的config

cnpm i -D webpack-merge

开始写webpack config

webpack-config/base.js

module.exports = {
  //common config
};

webpack-config/dev.js, webpack-config/prod.js

const webpackMerge = require('webpack-merge');
const base = require('./base');
module.exports = webpackMerge(base, {
  //specific config
});

webpack.config.js

const devModule = require('./webpack-config/dev');
const prodModule = require('./webpack-config/prod');
let finalModule = {};
let ENV = process.env.NODE_ENV;     //此处变量可由命令行传入
switch (ENV) {
  case 'dev':
    finalModule = devModule;
    break;
  case 'prod':
    finalModule = prodModule;
    break;
  default:
    break;
}
module.exports = finalModule;

编写npm scripts，区分环境

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "cross-env NODE_ENV=dev webpack",
    "prod": "cross-env NODE_env=prod webpack"
  },
  "devDependencies": {
    "webpack": "^2.2.0",
    "webpack-merge": "^2.6.1"
  }
}

由于*unix和windows设置NODE_ENV的语句有所差异，此处用到了一个库cross-env以达到兼容的目的

cnpm i -D cross-env

从dev环境写起

新建一个src目录用户存放项目源文件，同时在src下新建一个index.js作为打包的入口
webpack-dev-server
安装webpack-dev-server

    cnpm i -D webpack-dev-server

配置webpack config
webpack-config/dev.js

    ...
    module.exports = webpackMerge(base, {
      entry: process.cwd() + '/src/index.js',
      output: {
        filename: '[name].bundle.js'
      },
      devtool: 'eval-source-map'   //enable srouce map
    });

修改npm scripts
package.json

    {
     ...
     "scripts": {
       "dev": "cross-env NODE_ENV=dev webpack-dev-server --inline --hot --host 0.0.0.0",
       ...
     }
    }

htmlWebpackPlugins

src目录下新建一个index.html作为template，htmlWebpackPlugins会根据这个template生成网站的index.html，同时自动写入bundle依赖。
src下放一个favicon.ico作为网站的icon
安装htmlWebpackPlugins

    cnpm i -D html-webpack-plugin

配置webpack config
webpack-config/dev.js

    ...
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    ...
    module.exports = webpackMerge(base, {
      ...
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: process.cwd() + '/src/index.html',
          favicon: process.cwd() + '/src/index.html'
        })
      ]
      ...
    });

到这一步算是完成了最基本的开发环境配置，命令行执行npm run dev，然后浏览器打开localhost:8080就能看到成果
将npm scripts中的start命令指向npm run dev，这样每次开始开发只需要执行npm start
package.json

{
  ...
  "scripts": {
    ...
    "start": "npm run dev"
    ...
  }
  ...
}

Loaders(Rules)

webpack本身只能处理js模块，如果需要处理其他类型的文件，就需要Loaders进行转换
ES6+支持
ES6+虽然不能直接被浏览器全部识别，但是能用babel转换成ES5代码。
安装babel编译相关依赖

    cnpm i -D babel-core babel-preset-latest babel-preset-stage-2 babel-runtime babel-plugin-transform-runtime babel-loader

新建.babelrc文件并写入:
.babelrc

    {
      "presets": ["latest", "stage-2"],
      "plugins": ["transform-runtime"]
    }

配置rules
webpack-config/dev.js

    module.exports = webpackMerge(base, {
      ...
      module: {
        rules: [
          ...
          {
            test: /\.js$/,
            exclude: [/node_modules/],
            loader: 'babel-loader'
          }
          ...
        ]
      }
      ...
    });

css处理

现如今css预处理器已经成为前端开发的标配，Sass(Scss),Less和Stylus各行其道，个人偏好scss。
PostCss可以作为一个后处理器，实现为css自动添加浏览器前缀等功能

  • 安装相关依赖
    cnpm i -D style-loader css-loader postcss-loader autoprefixer node-sass sass-loader
  • 新建postcss.config.js
    postcss.config.js
    module.exports = {
      plugins: [
        require('autoprefixer')({browsers: ['last 2 versions', 'iOS 7', 'Firefox > 20']})
      ]
    };
  • 配置rules
    webpack-config/dev.js
    module.exports = webpackMerge(base, {
      ...
      module: {
        rules: [
          ...
          {
            test: /\.scss$/,
            exclude: [/node_modules/],
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  sourceMap: true
                }
              },
              'postcss-loader',
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: true
                }
              }
            ]
          }
          ...
        ]
      }
      ...
    });

html模板、图片等的处理

  • 安装相关依赖
    cnpm i -D html-loader file-loader url-loader
  • 配置rules
    webpack-config/dev.js
    module.exports = webpackMerge(base, {
      ...
      module: {
        rules: [
          ...
          {
            test: /\.html$/,
            loader: 'html-loader',
            options: {
              minimize: true
            }
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loader: 'url-loader',
            options: {
              limit: 10000,
              hash: 'sha512',
              publicPath: '/',
              name: 'assets/images/[hash].[ext]'
            }
          }
          ...
        ]
      }
      ...
    });

至此，dev环境配置完成

配置production环境

抽出公共部分

  • entry可以共用，prod的output需要加上文件chunkhash用来刷新缓存,并将文件输出至dist目录
    webpack-config/dev.js
    - entry: process.cwd() + '/src/index.js',

webpack-config/base.js

    module.exports = {
      entry: process.cwd() + '/src/index.js',
    };

webpack-config/prod.js

    const webpackMerge = require('webpack-merge');
    const base = require('./base');
    module.exports = webpackMerge(base, {
      output: {
        filename: 'bundle.[chunkhash].js',
        path: process.cwd() + '/dist'
      },
    });
  • HtmlWebpackPlugin公共
    webpack-config/dev.js
    -new HtmlWebpackPlugin({
    -  filename: 'index.html',
    -  template: process.cwd() + '/src/index.html',
    -  favicon: process.cwd() + '/src/index.html'
    -})

webpack-config/base.js

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
      ...
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: process.cwd() + '/src/index.html',
          favicon: process.cwd() + '/src/index.html'
        })
      ],
    };
  • js、html和图片loader公共，prod的css loader需要使用ExtractTextPlugin将css从js中分离出来
    webpack-config/dev.js
    -{
    -  test: /\.js$/,
    -  exclude: [/node_modules/],
    -  loader: 'babel-loader'
    -}
    ...
    -{
    -  test: /\.html$/,
    -  loader: 'html-loader',
    -  options: {
    -    minimize: true
    -  }
    -},
    -{
    -  test: /\.(jpe?g|png|gif|svg)$/i,
    -  loader: 'url-loader',
    -  options: {
    -    limit: 10000,
    -    hash: 'sha512',
    -    publicPath: '/',
    -    name: 'assets/images/[hash].[ext]'
    -  }
    -}

webpack-config/base.js

    ...
    module.exports = {
      ...
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: [/node_modules/],
            loader: 'babel-loader'
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
            options: {
              minimize: true
            }
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loader: 'url-loader',
            options: {
              limit: 10000,
              hash: 'sha512',
              publicPath: '/',
              name: 'assets/images/[hash].[ext]'
            }
          }
        ]
      }
    };
cnpm i -D extract-text-webpack-plugin@beta

webpack-config/prod.js

    ...
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    ...
    module: {
      rules: [
        {
          test: /\.scss$/,
          exclude: [/node_modules/],
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  minimize: true
                }
              },
              'postcss-loader',
              'sass-loader'
            ]
          })
        }
      ]
    },
    ...
    plugins: [
      new ExtractTextPlugin({
        filename: "bundle.[chunkhash].css"
      })
    ],

production环境的其它处理

  • 使用UglifyJsPlugin压缩js
cnpm i - D uglifyjs-webpack-plugin

webpack-config/prod.js

...
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = webpackMerge(base, {
  ...
  const webpack = require('webpack');
  ...
  plugins: [
    ...
    new UglifyJSPlugin({
      compress: {
        warnings: false,
      },
      output: {
        comments: false
      }
    })
    ...
  ]
  ...
})
...

使用CleanWebpackPlugin清空output目录

构建前先清空，防止出现垃圾文件

cnpm i -D clean-webpack-plugin

webpack-config/prod.js

...
module.exports = webpackMerge(base, {
  ...
  plugins: [
    ...
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    ...
    new CleanWebpackPlugin(['dist'], {
      root: process.cwd(),
      exclude: []
    })
    ...
  ]
  ...
})
...

至此，production环境配置完毕，同时抽出了公共部分

配置resolve.alias

开发的时候如果有一个很深的目录比如：src/a/b/c/d/, 然后在d目录下的一个模块需要引入a目录下的模块，需要这样写：import ‘../../../some-module’，为了方便可以配置一个为src目录配置一个alias，这样模块引入只需要这样写：import src/a/some-module。
webpack-config/base.js

    ...
    const path = require('path');
    ...
    module.exports = {
      ...
      resolve: {
        extensions: ['.js'],
        alias: {
          src: path.resolve(__dirname, './../src')
        }
      }
      ...
    };
  • 通常dev环境和production环境的配置参数比如api domain会有差异，所以需要利用alias将用户两个环境配置文件区分开来
    src目录下新建config目录，src/config目录下新增三个文件：base.js、dev.js、prod.js
    webpack-config/base.js
    export default {
      version: '1.0.0'
    }

webpack-config/dev.js

    import base from './base'
    export default {
      ...base,
      env: 'dev'
    }

webpack-config/prod.js

    import base from './base'
    export default {
      ...base,
      env: 'prod'
    }
  • 配置alias
    webpack-config/dev.js
    ...
    const path = require('path');
    ...
    module.exports = webpackMerge(base, {
      ...
      resolve: {
        alias: {
          config: path.resolve(__dirname, './../src/config/dev.js')
        }
      }
      ...
    })
    ...

webpack-config/prod.js

    ...
    const path = require('path');
    ...
    module.exports = webpackMerge(base, {
      ...
      resolve: {
        alias: {
          config: path.resolve(__dirname, './../src/config/prod.js')
        }
      }
      ...
    })
    ...
kingov
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【webpack学习】React项目中webpack.config.js 和 webpack.base.config.js 的区别
zx1041561837的博客
01-11 753
在React项目中，通常使用Webpack作为打包工具。
webpack.base.js
海阔天空
03-18 308
const path = require('path'); //处理html的插件 let HtmlWebpackPlugin = require('html-webpack-plugin'); let MiniCssExtractPlugin = require('mini-css-extract-plugin'); let {CleanWebpackPlugin} = require('clean-webpack-plugin');//见到插件放到plugins new XXXPlugin let
webpack自定义配置的方法及webpack-merge优化_webpack mergeconfig
最新发布
2401_84411522的博客
05-16 338
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
webpack5基础使用（2）-生产环境使用
lalala_dxf的博客
07-22 355
生产环境是开发完代码后，需要将得到的代码部署上线，这个模式下主要对代码进行优化，让其运行性能更好。优化主要从这两个角度出发1、优化代码运行性能2、优化代码打包速度。
react 引入less 2018/12/21
weixin_40046130的博客
12-21 999
最新的react包 引入less npm install less less-loader --save npm run eject 暴露出webpack 找到build中webpack.config.dev.js 新版本貌似引入sass  所以我们把关于sass 替换成less就ok 将sass替换成less 将sass-loader替换成less-loader 嫌麻烦的直接复制下面代码...
webpack.base.conf.js和 webpack.config.js有什么区别
qq_42044542的博客
03-31 548
负责定义通用的Webpack配置，包括入口文件、输出文件、模块解析规则、插件等。一般情况下，开发者需要在。中定义一些通用的Webpack配置，然后在开发环境和生产环境的配置文件中继承并覆盖一些配置。中，开发者可以根据需求定义不同的Webpack配置，以满足不同的开发和部署需求。是两个不同的Webpack配置文件，其主要区别在于它们所负责的职责和任务不同。，负责定义针对特定环境的Webpack配置，包括开发环境和生产环境。
Vue.js 打造高级实战-音乐 App
04-28
│ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── ...
webpack开发环境和生产环境切换原理.docx
07-14
例如，我们可以在 `webpack.config.js` 文件中添加以下配置： ``` module.exports = { // ... env: { NODE_ENV: 'production', env_config: 'prod' } } ``` 在上面的配置中，我们设置了 `NODE_ENV` 环境变量...
vue.js编译时给生成的文件增加版本号
01-19
名称是通过HASH的方式进行生成的，但是每次生成的文件基本都是一样的，那么浏览器就会缓存这些文件，为了在更新的时候能够保证js和css文件能够更新，那么我们需要针对webpack的配置文件进行修改； 打开webpack.prod....
详解基于webpack2.x的vue2.x的多页面站点
01-19
本文介绍了基于webpack2.x的vue2.x的多页面站点，分享给大家，具体如下： vue的多页面 依旧使用vue-cli来初始化我们的项目...│ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.c
vue-cli分析-webpack.dev.config.js
weixin_34384557的博客
08-08 2358
本系列文章主要讲下vue的webpack脚手架的前因后果,逐行分析其操作。如果写的有问题请务必指出！如果觉得写的还不错点个赞就是对我最大的鼓励了,谢谢！ 架构说明 当使用vue-cli脚手架生成项目后,项目架构与其作用大概是这样的： build负责针对不同编译环境,webpack采用哪些配置,摒弃哪些机制相关 config是build编译文件的另外扩展,把需要用到的配置提取出来,让配置更模块化 ...
【零基础学习Webpack】webpack不同环境打包
球球博客
10-22 1061
Webpack区分环境打包 1、通过环境变量区分 webpack --env.production webpack.config.js中判断env 打包命令：webpack --env=production module.exports = (env, argv) => { if(env.production){ //生产环境的配置 }else{ //开发环境的配置 } } 2、通过不同的配置文件区分 cnpm install webpack-merge -D 创
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
jieyucx的博客
06-14 5004
兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader。这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理。在以前的章节中，我们配置过的生产环境的打包文件，webpack.prod.js。我们去控制台将往速调慢，然后运行打包好的index.html文件。用法很简单，引入，然后在plugin配置对象中添加就可以了。如图，css文件已经被处理成了单独的文件了。文件加载时，会创建一个。
webpack中webpack.config.js、package.json
想做大牛的蜗牛
11-20 3924
webpack中webpack.config.js、package.json文件 webpack.config.js文件内容const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require("path"); module.exports =
webpack学习之webpack.config.js详解
xcxiang的博客
08-24 1540
一、webpack.config.js概览var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output: { path: './build',
webpack.dev.conf.js文件
倾世~茹薇
04-27 4089
webpack.dev.conf.js文件是在项目开发环境下使用的文件。该文件中的module对象：rules中增加了cssSourceMap的功能。const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.css...
webpack手动搭建 es6+less 开发环境和打包
现在学习也不晚
11-17 2208
目标 首先可以实现开发环境，保存代码自动更新 其次，可以将代码进行压缩打包 代码地址本人将代码打包上传到了云上面一份，详见地址点我实现我们需要搭建一个webpack环境，没有node的自行百度安装，然后用npm安装webpack，全局安装：npm i webpack -gpackage.json文件内容然后再一个文件夹内创建一个package.json文件，里面的内容为{ "name": "cl
webpack4搭建Vue开发环境笔记~~持续更新
weixin_30815469的博客
12-15 148
项目git地址 一、node知识 __dirname: 获取当前文件所在路径，等同于path.dirname(__filename) console.log(__dirname); // Prints: /Users/mjr console.log(path.dirname(__filename)); // Prints: /Users/mjr path.resolve([..paths]): ...
从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置
03-27 2208
从零搭建前端开发环境（零）——基础篇：1.npm、git及项目初始化 从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置 从零搭建前端开发环境（零）——扩展篇：3.jest单测 从零搭建前端开发环境（零）——扩展篇：4.eslint统一代码规范 从零搭建前端开发环境（零）——终极篇：5.构建自己的前端脚手架 接下来就要进行工程化的操作了，主要有两个目的。 对静态文...
webpack.base.config.js 和webpack.dev.conf.js和webpack.config.js 和webpack.prod.conf.js和 vue 项目中的config文件夹下的index.js
07-22
在一个Vue项目中，常见的Webpack配置文件包括： 1. `webpack.base.config.js`：这是一个基础的Webpack配置文件，定义了通用的配置选项，例如入口文件、输出路径、模块解析规则等。它是不同环境配置文件的基础。 2. `webpack.dev.conf.js`：这是用于开发环境的Webpack配置文件。它会基于`webpack.base.config.js`进行扩展和覆盖，添加一些开发环境特定的配置选项，例如热重载、Source Maps等。 3. `webpack.prod.conf.js`：这是用于生产环境的Webpack配置文件。它同样会基于`webpack.base.config.js`进行扩展和覆盖，添加一些生产环境特定的配置选项，例如代码压缩、资源优化等。 4. `webpack.config.js`：在某些项目中，可能会使用单一的Webpack配置文件来同时处理开发环境和生产环境。这个文件会根据环境变量动态地配置Webpack。它可能会引入`webpack.base.config.js`并根据环境变量来扩展或覆盖一些配置选项。 5. `config/index.js`：这是一个存放项目全局配置的文件夹。其中的`index.js`文件包含了一些开发和生产环境的全局配置选项，例如服务器地址、端口号、是否开启热重载等。你可以在这个文件中进行自定义配置以满足项目的需求。 需要注意的是，具体的配置内容和结构可能因项目而异，你可以根据项目需求自定义修改这些配置文件。这些文件的目的是为了方便开发者根据不同环境和需求来配置和优化Webpack打包过程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值