webpack4 常用插件配置

最新推荐文章于 2024-09-05 14:26:45 发布
最新推荐文章于 2024-09-05 14:26:45 发布
阅读量896 收藏 3
点赞数
分类专栏： webpack 文章标签： webpack4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SunShinessx/article/details/87346162
版权

webpack4已经发布将近一年，之前用的都是webpack3。所以总结了一下webpack4常用插件，各种loader配置，以供学习参考。代码已经上传到github上，github地址：

https://github.com/ssxdjq/my-webpack-demo

有问题欢迎指正！

demo介绍

demo01

webpack 默认配置文件是webpack.config.js，entry：打包入口文件，output：打包出口文件。 按照demo01新建main.js:

document.write('<h1>Hello World</h1>');

index.html

<html>
  <body>
    <script type="text/javascript" src="./dist/bundle.js"></script>
  </body>
</html>

执行命令 cd demo01 npx webpack

编译打包完成后，用浏览器打开index.html,就可看到效果。

demo02

运行方法与demo01一致。此demo添加了style-loader,css-loader帮助打包css文件，具体按照看readme webpack.config.js增加了rules配置：

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

项目新增了index.css文件，main.js引入了css文件。此时打包出来的css文件是被style-loader以style的形式注入到html里面，所以我们看不到有css文件。

demo03

此demo在demo02的基础上演示了sass-loader的配置，引入了test.scss文件。注意webpack.config.js的rules配置：

module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader', // 将 Sass 编译成 CSS
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }

先是写style-loader,再写css-loader,最后才写sass-loader,因为webpack的解析顺序是逆序的，先执行sass-loader,再执行css-loader,以此类推。 sourceMap:true设置，帮助问快速找到css样式所在文件位置，方便调试。

demo04

此demo演示了post-loader的配置，post-loader是一个框架，它实际没有什么作用，但是可以在此基础上，安装很多插件，比如autoprefixer，可以帮我们自动添加css浏览器前缀。 webpack.config.js的rules配置：

module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: (loader) => [require('autoprefixer')({ browsers: ['> 0.15% in CN'] })]
            }
          },
          {
            loader: 'sass-loader', // 将 Sass 编译成 CSS
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }

demo05

此demo演示了mini-css-extract-pluginr的配置,这个插件的作用是在生产环境打包的时候，让js和css文件分别打包，从而可以让js和css文件同时解析，提高运行速度。用了这个就不要用style-loader了。 webpack.config.js的rules配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: (loader) => [require('autoprefixer')({ browsers: ['> 0.15% in CN'] })]
            }
          },
          {
            loader: 'sass-loader', // 将 Sass 编译成 CSS
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

demo06

此demo演示了optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin的配置,这两个插件的作用是在生产环境打包的时候，让对js和css文件进行压缩。 webpack.config.js的rules配置：

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

 plugins: [
    new OptimizeCssAssetsPlugin({})// 压缩css插件
  ],
  optimization: {
    minimizer: [new UglifyJsPlugin()]// js压缩
  }

demo07

此demo演示了html-webpack-plugin和clean-webpack-plugin的配置,html-webpack-plugin的作用是把打包的后的bundle.js自动注入到html模板中，clean-webpack-plugin是每次重新打包的时候，删除掉之前打包的文件。 webpack.config.js的rules配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
 plugins: [
 	 new HtmlWebpackPlugin({ // Also generate a test.html
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html')
    }),
    new CleanWebpackPlugin('dist')
 ]

demo08

此demo演示了file-loader,url-loader和image-webpack-loader的配置,file-loader,url-loader的作用是打包图片资源，image-webpack-loader是对图片进行压缩。其中url-loader还有一个作用，就是把图片转换成base64，所以一般图片打包，我们就用url-loader和image-webpack-loader就可以了。 webpack.config.js的rules配置：

module：{
rules: [
 {
        test: /\.(png|jpg|gif)$/,
        use: [
          // {
          //     loader: 'file-loader',
          //     options: {
          //         name: '[path][name].[ext]'
          //     },
          // },
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[path][name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
]
}

demo09

此demo演示了webpack-merge这个loader的作用。实际开发中，开发环境和生成环境的webpack配置文件是不一样的，但是又有很多共同的配置，所以可以抽取共同配置为webpack.common.js，而开发环境的可以编辑为webpack.dev.js，生产环境的可以编辑为webpack.prod.js。webpack-merge就是合并两个webpack配置文件的作用。 webpack.dev.js的rules配置：

const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, devConfig);

demo10

此demo演示了webpack其他一些常用配置

devtool: 'inline-source-map', // 在开发阶段开启source-map，编译js调试

resolve: {
    alias: { // 配置别名
      '@': path.resolve(__dirname, 'src/'),
      'common': path.resolve(__dirname, 'src/common'),
      'assets': path.resolve(__dirname, 'src/assets')
    },
    extensions: ['.js', '.vue', '.json'] // 默认值: [".js",".json"]  模块名字可以省略的后缀名
  },

  externals: { // 把一个模块做成外部依赖，不会打包到 js文件中。
    jquery: 'jQuery',
    lodash: '_'
  },

另外，webpack-bundle-analyzer这个插件可以形象帮助分析webpack打包的文件组成，方便进行webpack配置优化

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugins: [
    new BundleAnalyzerPlugin()
  ]

demo11

此demo展示webpack-dev-server的配置，启动一个web服务器，同时开启服务器代理，解决跨域问题。实时调试代码。这个插件也是在开发阶段才使用。 webpack.dev.js配置：

const webpack = require('webpack');

 devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8000, // 本地服务器端口号
    hot: true, // 热重载
    overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
    proxy: {
      // 跨域代理转发
      '/comments': {
        target: 'https://m.weibo.cn',
        changeOrigin: true,
        logLevel: 'debug',
        headers: {
          Cookie: ''
        }
      }
    },
    historyApiFallback: {
      // HTML5 history模式
      rewrites: [{ from: /.*/, to: '/index.html' }]
    }
  },
 plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ]

demo12

此demo演示了babel-loader和eslint配置。babel-loader是编译ES6为浏览器可以运行的js；eslint是规范代码编写。

新建eslintc.js编辑lint规则，eslintignore忽略lint的文件 eslintc.js：

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  globals: {
    NODE_ENV: false
  },
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 添加，分号必须
    semi: ['error', 'always'],
    'no-unexpected-multiline': 'off',
    'space-before-function-paren': ['error', 'never'],
    // 'quotes': ["error", "double", { "avoidEscape": true }]
    quotes: [
      'error',
      'single',
      {
        avoidEscape: true
      }
    ]
  }
};

.eslintignore.js

/dist/
/node_modules/
/*.js

webpack.common.js

{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        include: [resolve('src')],
        options: {
          fix: true
        }
      },

 

webpack-dev-server配置学习：

参考：

https://www.cnblogs.com/geyouneihan/p/9827194.html

SunShinessx
关注
专栏目录
webpack常用配置总览(小结)
10-15
主要介绍了webpack常用配置总览(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack的常用配置
fwk19840301的博客
02-07 3574
webpack 中文文档 webpack.dev /* 1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里 2.该文件要符合CJS模块化规范 */ //引入Node中一个内置的path模块，专门用于解决路径问题 const {resolve} = require('path'); //引入html-webpack-plugin，用于加工html文件 const HtmlWebpackPlugin = require('html-w.
webpack的配置
最新发布
专研技术的大学生
09-05 1598
Webpack的配置详解
webpack常用配置
Follow_the_heart的博客
01-23 1936
webpack常规说明
浅谈webpack构建工具配置和常用插件总结
11-20
让我们深入了解一下Webpack的基础配置和常用插件。 首先，要开始使用Webpack，你需要在项目的根目录下执行`npm init`来创建`package.json`文件，这将记录你的项目信息和依赖。接着，通过`npm install webpack ...
webpack配置文件和常用配置项介绍
08-30
Webpack 配置文件和常用配置项介绍 Webpack 是一个流行的前端模块加载器和打包工具，通过配置文件，可以控制 webpack 的行为和输出结果。下面将详细介绍 webpack 配置文件和常用配置项。 Webpack 配置文件 ...
webpack常用配置项配置文件介绍
09-01
本文将详细介绍 Webpack 的常用配置项及其配置文件。 **一、Webpack 基础** 1. **生成 package.json**：在项目根目录下运行 `npm init`，按照提示输入项目信息，会生成一个 `package.json` 文件，这个文件记录了...
webpack4 从零学习常用配置(小结)
10-16
开发者需要理解并掌握Webpack的常用配置，包括但不限于别名(alias)、代码分割(chunk)、externals(外部依赖)等，以及性能优化技巧，如Tree Shaking、懒加载(Lazy Loading)等。 总的来说，Webpack 4 的配置涉及到项目...
webpack 常用配置项
韩吉鑫的博客
11-09 350
const path = require('path'); moudule.exports = { // entry 表示入口webpack 执行构建的第一步将从entry开始 // 类型可以使 string object array entry: './src/entry', // 只有一个入口时 entry: ['./src/entry', './src/e...
webpack 常用配置
weixin_51369544的博客
09-09 2524
环境搭建 既然是前端项目，那么就npm就必不可少 运行 npm install webpack-cli -g 来全局安装脚手架 随后使用 npm install webpack-cli -D 安装到工程下 在工程目录下创建 webpack.config.js （文件名固定） 来作为webpack的配置文件，所有有关webpack的配置都写在此文件中，其中的内容通过es5语法暴露出去 五个核心配置 webpack 五个核心配置是 entry 入口文件 output 输出 mo
Webpack 之常用配置（一）
xiaoheibanfe的博客
12-09 2583
作者：余韵之 webpack目前是前端常用的工程化工具了。它可以帮助我们自动化构建打包各类的资源，极大的提高了我们打包代码的效率。在webpack看来，所有的资源文件都是模块(module),只是处理的方式不同。 一、初探webpack 1、安装webpack 建议不要全局安装webpack,因为不同的项目webpack的版本号是不一样的。这样多个项目来回切换是很不方便的。 npm install wepack webpack-cli -g在项目内安装webpack npm install wepack.
webpack常见配置
qq_27848059的博客
05-06 461
​ const path = require('path'); const webpack = require('webpack'); // 该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle const HtmlWebpackPlugin = require('html-webpack-plugin'); // 将已存在的单个文件或整个目录复制到构建目录 const CopyWebpcakPlugin = require...
webpack配置插件项
qq_38850058的博客
05-30 252
这篇博客是记了一个关于webpack的笔记 postcss-loader 首先postcss-loader 和 postcss-cssnext 是关于css自动补充前缀的一个插件， webpack 里面rules配置use: [‘style-loader’, ‘css-loader’, ‘postcss-loader’] 项目根目录创建一个postcss.config.js 文件， modu...
webpack 项目常用配置
单眼皮丶儿的博客
11-16 288
随着vue-cli、CreateReactApp等脚手架工具的愈加完善，其带给广大开发者方便、高效的开发体验使其越来越受追捧。其实，这类脚手架的底层都是通过webpack来实现的，其中vue-cli对webpack更是进行了很好的封装，使开发者即使不了解webpack也能很好的使用其各种功能。这样做的好处是使得开发者能够更轻松、更快的上手vue-cli，但是使用起来也就不是很灵活了，所以了解web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值