WebPack 4.x 配置

webpack4.0配置说明

什么是 Webpack

webpack是前端资源模块化管理和打包工具，可将松散的模块按依赖和规则打包成符合生产环境部署的前端资源。可将按需加载的模块进行代码分隔并进行异步加载。通过loader的装换，任何形式的资源都可视作模块，如CommonJS模块、AMD模块、ES6模块、CSS、图片、JSON、CoffeeScript、LESS等。

简单来说，它其实就是一个模块打包器。

为什么要使用？

模块开发，简化开发，提高了开发效率

概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

• 入口（entry）
• 输入（output）
• loader （让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用）
• plugin （loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。）
• 模式（mode）

创建webpack结构目录

entry (入口)

指定加载的主文件的路径

module.exports = {
  entry: './src/index.js', // 表示加载当前路径下的src的index.js，如果加载多个文件可写数组 如： ['./src/index.js','./src/index2.js']
};

output （输出）

表示打包后输入的路径

module.exports = {
  entry: './src/index.js', 
  output: {
    filename: '[name].js', // [name] 表示输入为原名称
    path:path.resolve(__dirname, 'dist'),
  },
};

loader

loader 用于对模块的源代码进行转换，类似于其他构建工具中“任务(task)”。

loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

特点：

• loader 可以是同步的，也可以是异步的

• loader 运行在 Node.js 中，并且能够执行任何操作。

• 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。

• 插件(plugin)可以为 loader 带来更多特性。

• loader 能够产生额外的任意文件。

常用Loader

babel-loader

作用：es6转换成es5

https://webpack.docschina.org/loaders/babel-loader/

1. 安装依赖

   npm install -D babel-loader @babel/core @babel/preset-env webpack
   

2. 添加配置文件

   module.exports = {
       entry: './src/index.js',
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'bundle.js',
       },
       module: {
           rules: [{
               test: /\.m?js$/,
               exclude: /(node_modules)/, // 表示排除的文件夹 
               use: {
                   loader: 'babel-loader', // 使用的loader 
                   options: {
                       // babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率
                       cacheDirectory: true, 
                       presets: ['@babel/preset-env'] // 使用的预设
                   }
               }
           }]
       }
   };
   

@babel/preset-env 只会转换语法，也就是我们看到的箭头函数、const一类。
如果进一步需要转换内置对象、实例方法，那就得用polyfill, 这就需要你做一点配置了,

如下，使用 Promise、async、await 这写高级函数，@babel/preset-env 这个loader就有点费劲了。

let result = new Promise((resolve, reject) => {
    resolve('成功了')
});

setTimeout(async() => {
    await console.log("async -> await")
}, 200);

console.log(result)

在控制台会输入这个错误,具体原因请看这个帖子
https://zhuanlan.zhihu.com/p/147083132

@babel/preset-env 拥有根据 useBuiltIns 参数的多种polyfill实现。
优点：是覆盖面比较全（entry）。
缺点：会污染全局。
useage 可以按需引入 polyfill, 打包体积就小， 但如果打包忽略node_modules 时如果第三方包未转译则会出现兼容问题

官方推荐使用 @babel/plugin-transform-runtime

1、安装 npm install -D @babel/plugin-transform-runtime
2、配置 @babel/plugin-transform-runtime 插件

module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /(node_modules)/, // 表示排除的文件夹 
            use: {
                loader: 'babel-loader', // 使用的loader 
                options: {
                    cacheDirectory: true,
                    presets: ['@babel/preset-env'], // 使用的预设
                    plugins: ['@babel/plugin-transform-runtime'], // 处理高级语法
                }
            },
        }]
    }

3、运行后的结果，打包的代码为es5的处理结果

cache-loader

cache-loader 允许缓存以下 loaders 到（默认）磁盘或数据库。
在一些性能开销较大的 loader 之前添加 cache-loader，以便将结果缓存到磁盘里。

安装

npm install --save-dev cache-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.ext$/,
        use: ['cache-loader', ...loaders],
        include: path.resolve('src'),
      },
    ],
  },
};

请注意，保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader。

css-loader

css-loader 帮我们解析了css会，对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。

安装依赖

npm install --save-dev css-loader

配置loader

{
     test: /.css$/,
     loader: 'css-loader',
     exclude: /node_modules/
}

在index.js 和 index.css 写下如下代码。

游览器将渲染

style-loader

把 CSS 插入到 DOM 中。

就是将下面的代码，让插件帮你添加到html中。

let style = document.createElement('style');
style.innerText = css[0][1];

安装

npm install --save-dev style-loader

配置

module: {
        rules: [{
            test: /.css$/,
            // loader: 'css-loader',
            use: ["style-loader", "css-loader"],
            exclude: /(node_modules|bower_components)/
        }]
    }

然后在直接引用css就可以了。

sass-loader

加载 Sass/SCSS 文件并将他们编译为 CSS。

1、安装

npm install sass-loader sass webpack --save-dev

2、配置

{
            test: /.css$/,
            use: [
                // 将 JS 字符串生成为 style 节点
                'style-loader',
                // 将 CSS 转化成 CommonJS 模块
                'css-loader',
                // 将 Sass 编译成 CSS
                'sass-loader',
            ],
           exclude: /(node_modules|bower_components)/
  }

3、引用 import ‘./index.scss’; 就可以了。

file-loader

可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；

安装

 npm install file-loader --save-dev

配置

{
        test: /\.(png|jpe?g|gif)$/i, // 正则匹配后缀
        use: [
          {
            loader: 'file-loader',
            options:{
				name: '[path][name].[ext]', // 打包后的名称
				outputPath:"images/", // 打包后输入的文件夹
			}
          },
        ],
 },

url-loader

webpack 的加载器，可将文件转换为 base64 URI。

安装

 npm install url-loader --save-dev

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader', 
            options: {
              limit: 8192, // 小于8192字节的图片打包成base 64图片
              name:'images/[name].[hash:8].[ext]',
              publicPath:''
            }
          }
        ]
      }
    ]
  }
}

eslint-loader

安装

npm install eslint eslint-loader --save-dev

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          
        }
      }
    ]
  }
};

source-map-loader

从现有源文件（从它们的sourceMappingURL）中提取源映射。

安装

npm i -D source-map-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
};

source-map-loader从所有 JavaScript 条目中提取现有的源映射。这包括内联源映射以及通过 URL 链接的源映射。所有源的地图数据被传递到的WebPack用于按照所选择的处理源地图样式由指定devtool在选项

postcss-loader

自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

安装

npm install --save-dev postcss-loader postcss

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

使用 postcss.config.js 配置文件

// postcss.config.js
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

plugin

HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

安装

npm install --save-dev html-webpack-plugin

配置

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	plugins: [new HtmlWebpackPlugin( 
    template: 'index.html',
	minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },)]
}

常用配置

名称	描述
title	用来生成页面的 title 元素
filename	要将 HTML 写入到的文件。默认为index.html. 您也可以在此处指定子目录（例如：）assets/admin.html。该[name]占位符将与输入的名称所取代。也可以是一个函数，例如(entryName) => entryName + ‘.html’.
template	webpack模板的相对或绝对路径。默认情况下，src/index.ejs如果存在，它将使用。
publicPath	用于脚本和链接标签的 publicPath
favicon	将给定的图标路径添加到输出 HTML
meta	可以给html加入meta标签
minify	控制是否以及以何种方式应该缩小输出 , 比如 minify: { removeAttributeQuotes: true // 移除属性的引号 }
hash	用于清除缓存,默认fasle
cache	指定文件要不要缓存
showErrors	错误详细信息将写入 HTML 页面,默认true
chunks	可以配置多个打入口

mini-css-extract-plugin

这个插件将 CSS 提取到单独的文件中。它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持按需加载 CSS 和 SourceMaps。

与 extract-text-webpack-plugin 相比：

• List item
• 异步加载
• 无重复编译（性能）
• 更容易使用
• 特定于 CSS

安装

npm install --save-dev mini-css-extract-plugin

配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能，简称热更新。

安装

npm install --save-dev webpack-dev-server

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
	
 module.exports = {
	 devServer: {
        publicPath: '/', // 前缀
        port: 8888, // 服务器监听的端口
        open: true, // 是否打开浏览器提供访问
        compress: true, // 启动gzip压缩
        host: "127.0.0.1", // 可以让别人访问当前服务，但是如果这边编译，那边也会同步更新
        inline: true,
        hot: true, // 热跟新，在不刷新的情况更改css,需要配合webpack.HotModuleReplacementPlugin使用 
    },
}

要是出现 Cannot find module ‘webpack-cli/bin/config-yargs’ 这个错误，说明webpack-cli 和 webpack-dev-server 的版本不匹配。

版本对应：
“webpack”: “^4.44.1”,
“webpack-cli”: “^3.3.12”,
“webpack-dev-server”: “^3.11.0”

clean-webpack-plugin

每次打包前清空之前编译的文件夹。

安装

npm i clean-webpack-plugin -D

配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	 plugins: [
	        new CleanWebpackPlugin(),
	 ]
}

css-assets-webpack-plugin

它将在 Webpack 构建期间搜索 CSS 资产并优化\最小化 CSS。

安装

npm install --save-dev optimize-css-assets-webpack-plugin

配置

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
  module: {
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'), // 用于优化\最小化 CSS 的 CSS 处理器，默认为cssnano
      // 传递给 的插件选项cssProcessor，默认为{}
      cssProcessorPluginOptions: { 
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true, // 指示插件是否可以将消息打印到控制台，默认为 true
    })
  ]
};

uglifyjs-webpack-plugin

对js文件进行压缩。

安装

npm install uglifyjs-webpack-plugin --save-dev

配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  optimization: {
    minimizer: [
    new UglifyJsPlugin(
	    {
	        test: /\.js(\?.*)?$/i,
	    }
     )],
  },
};

配置

source map

一种 提供源代码到构建后代码映射技术 （如果构建后代码出错，可以通过映射追踪到源代码错误）

其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。

开发模式：devtool: ‘cheap-eval-source-map’

生产模式: devtool: ‘cheap-source-map’