webpack 4.0 小记-CSDN博客

介绍

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

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

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

项目结构

开始

项目初始化

yarn init / npm init   // 创建 package.json
复制代码

创建文件夹

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

复制代码

《未完待续...》