webpack 4.0 小记

介绍

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

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

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

项目结构

开始

  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
    }
}

复制代码

《未完待续...》

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值