webpack 4.0 小记

栏目: 编程语言 · 发布时间: 5年前

内容简介：其实之前也会看一些 webpack 脚手架的配置，但是使用的插件实在是太多了，不了解各个插件的左右是一个很大的瓶颈，所以着手认识认识各大插件。项目使用 yarn,之前用主要使用 cnpm，但是总是会有些漏包的问题，所以之后改用了 yarn，个人确实觉得 yarn 在国内来说更友好。

其实之前也会看一些 webpack 脚手架的配置，但是使用的插件实在是太多了，不了解各个插件的左右是一个很大的瓶颈，所以着手认识认识各大插件。

项目地址 ，之前一直都是用脚手架工具，最近得闲就学习了花裤衩大佬的手摸手系列，自己按着实现一下，顺便记录一下知识点。

项目使用 yarn,之前用主要使用 cnpm，但是总是会有些漏包的问题，所以之后改用了 yarn，个人确实觉得 yarn 在国内来说更友好。

项目结构

webpack 4.0 小记

开始

  1. 项目初始化
yarn init / npm init   // 创建 package.json
复制代码
  1. 创建文件夹
build   // 存储打包相关文件
config  // 配置变量
src     // 项目资源文件
static  // 静态文件
复制代码

webpack 相关插件介绍

其他的具体配置看源码就好了，我在这里主要介绍一下相关的几个插件(基于 webpack 4.0)

webpack-cli | webpack | webpack-dev-server | webpack-merge

webpack 4.0 需要安装 webpack-cli

yarn add --dev webpack-cli webpack webpack-dev-server webpack-merge
复制代码
webpack-cli         // webpack 脚手架，包含了很多内置方法(例如：--compress， --color)
webpack-dev-server  // 配置开发环境服务
webpack-merge       // 用于合并 webpack 公共配置，缩减代码量，使代码更清晰
复制代码

webpack-dev-server

devServer:{
    contentBase: false,
    //我这里没有设置contentBase，个人研究contentBase必须指向存在的bundle.js文件所在目录，
    //因为这里是开发模式，所以dist目录并不存在，所以用false.
    host:' localhost',
    port: '8888',
    inline:true,//webpack官方推荐
    watchOptions: {
        aggregateTimeout: 2000,//浏览器延迟多少秒更新
        poll: 1000//每秒检查一次变动
    },
    compress: true,//一切服务都启用gzip 压缩
    historyApiFallback: true,//找不到页面默认跳index.html
    hot: true,//启动热更新，必须搭配new webpack.HotModuleReplacementPlugin()插件
    open: true,
}
复制代码

webpack-dev-server 其他配置项以及在 package.json 中的快捷实用

webpack(?.base).js 中使用

devServer 还有以下属性

// 在所有响应中添加首部内容
headers: {
  "X-Custom-Foo": "bar"
}

复制代码
// 默认情况下，dev-server 通过 HTTP 提供服务。也可以选择带有 HTTPS 的 HTTP/2 提供服务
https: true
// 以上设置使用了自签名证书，但是你可以提供自己的：https: {
  key: fs.readFileSync("/path/to/server.key"),
  cert: fs.readFileSync("/path/to/server.crt"),
  ca: fs.readFileSync("/path/to/ca.pem")
}
复制代码
// 当存在编译器错误或警告时，在浏览器中显示全屏覆盖。默认情况下禁用。如果只想显示编译器错误：
overlay: true
// 如果您想显示警告和错误：
overlay: {
  warnings: true,
  errors: true
}
复制代码
如果你不想始终传递 /api，则需要重写路径：proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }}
复制代码

package.json 中使用以下都是 webpack-dev-server --xxxx 模式

--allowed-hosts // host 白名单

--color // CLI only 控制台信息颜色

--compress // CLI only 一切服务都启用gzip 压缩

--inline // 默认为 true， false 为 iframe 模式。 在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。也可以使用iframe 模式，它在通知栏下面使用标签，包含了关于构建的消息。切换到iframe 模式：

--open // 自动打开浏览器 --open 'Google Chrome': 自动打开谷歌浏览器

--openPage // 自动打开的页面路径 如 webpack-dev-server --open-page "/different/page"

--progress // 将运行进度输出到控制台

webpack-html-plugin

yarn add --dev html-webpack-plugin@next
复制代码
// webpack.xxx.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
... ...
// plugin中需要引入配置
new HtmlWebpackPlugin({
    template: 'index.html',
    filename: 'index.html',
    inject: true,
    favicon: resolve('favicon.ico'),
    title: 'webpack demo',
    minify: { // 压缩 HTML 的配置
        minifyCSS: true, // 压缩 HTML 中出现的 CSS 代码
        minifyJS: true, // 压缩 HTML 中出现的 JS 代码
        removeComments: true, // 移除注释
        collapseWhitespace: true, // 缩去空格
        removeAttributeQuotes: true // 移除属性引号
    }
})

复制代码

index.html 中使用 plugin 配置的变量

// index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
     maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
复制代码

copy-webpack-plugin

作用：在webpack中拷贝文件和文件夹, 打包的时候需要配置使用

// webpack.prod.js 

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
    new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: path.resolve(__dirname, '../dist/static'),
            ignore: ['.*']
        }
    ])
]
复制代码

mini-css-extract-plugin 配置

此插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。它建立在新的webpack v4功能（模块类型）之上，并且需要webpack 4才能工作。

yarn add --dev mini-css-extract-plugin
复制代码
// 生产环境压缩需要使用 optimize-css-assets-webpack-plugin 配合使用

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};
复制代码

babel-loader

webpack 配置 babel 需要安装 babel-core、babel-preset-env、babel-loader、 babel-plugin-transform-runtime

babel-core：是babel的核心编译器

babel-preset-env： 是一个配置文件，可以根据此配置文件让目标浏览器或者运行环境来自动将ES2015+的代码转换为es5，得以向下兼容

babel-loader： webpack 插件，预处理文件

babel-plugin-transform-runtime： 禁用了 babel 自动对每个文件的 runtime 注入，而是引入 babel-plugin-transform-runtime 并且使所有辅助代码从这里引用。

yarn add --dev babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime
复制代码

babel-loader^8.0.0 安装的 babel-core 以及 babel-preset-env 和以前不同， 具体使用详见babel-loader，

以上插件需要用以下的替换

"@babel/core": "^7.4.5",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.4.5",
复制代码
// webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']，
          plugins: ['@babel/transform-runtime']
        }
      }
    }
  ]}
复制代码

在 .babelrc 中添加插件

//  .babelrc

{
"plugins": ["@babel/plugin-transform-runtime"]
}

复制代码

eslint

eslint 主要用于检查语法错误，配合 prettier，vscode 配置插件，可以统一代码风格 需要安装 eslint、eslint-loader、babel-eslint、eslint-config-standard、eslint-friendly-formatter

yarn add --dev eslint eslint-loader babel-eslint eslint-config-standard  eslint-friendly-formatter
复制代码

babel-eslint： 解析器 eslint-config-standard： 官方推荐标准配置 eslint-friendly-formatter： 使 eslint 报错的更友好 eslint-plugin-vue： vue相关配置

这里使 eslint-config-standard，还需要安装一下插件

yarn add --dev eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise
复制代码
// .eslintrc.js

module.exports = {
    root: true, 
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    env: {
        browser: true,
        node: true,
        es6: true
    },
    extends: "eslint: standard",  // 引用 扩展规则
    rules: {
        "indent": ["error", 2],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],
        "no-console": "error",
        "arrow-parens": 0
    }
}

复制代码

《未完待续...》


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Responsive Web Design

Responsive Web Design

Ethan Marcotte / Happy Cog / 2011-6 / USD 18.00

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft be......一起来看看 《Responsive Web Design》 这本书的介绍吧!

码农工具
图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3