webpack 的 loader 和 plugin

Plugin

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: "./src/main.js", // 入口
  output: {
    path: path.resolve(__dirname, "dist"), // path 为绝对路径，所以要借助 resolve 方法
    filename: "main.js",
  },
  plugins: [new HtmlWebpackPlugin({template: './index.html'})],
};

上面的示例用到了 html-webpack-plugin 插件，该插件会生产一个 html 模板并把所有打包后的 bundle 注入到该模板。

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: "./src/main.js", // 入口
  output: {
    path: path.resolve(__dirname, "dist"), // path 为绝对路径，所以要借助 resolve 方法
    filename: "main.js",
  },
  plugins: [new HtmlWebpackPlugin({template: './index.html'})],
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

上面这个例子就是对 style-loader 和 css-loader 的应用，这样程序就能成功识别到 css 模块。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 安装 Nginx 修改默认端口

用远程工具连接我们上次购买的机器，这里我要介绍一个知识点，博主使用的工具是 MobaXterm，这个工具有一个多操作的功能，在下图的位置可以开启多操作，然后连接你的服务器机子即可： 首先我们将机子里面的依赖源都更新一下，在去安装 Nginx，在控制台输入如下命…