《和小米一起学Vue.js》— webpack配置文件

在 webpack 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件 webpack.config.js

TIP：如果 webpack.config.js 文件存在，则 webpack 命令将默认选择使用它。如果想使用其他名称的配置文件，使用 --config 选项表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。

--webpack.config.js
const path = require('path');
module.exports = {
  mode: "production",
  //所选模式告诉webpack相应地使用其内置优化。"production" | "development" | "none"
  entry: "./src/main.js",
  // 指定入口文件 string | object | array
  output: {
    // webpack 如何输出结果的相关选项
    path: path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径 , 必须是绝对路径（使用 Node.js 的 path 模块）
    filename: "bundle.js", // string | array
    // 出口文件名称
  }
}

编写好配置文件之后，直接命令行运行 npx webpack 即可直接编译，无需其他参数 

引入其他文件

webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。  

加载 CSS

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader 

运行命令来安装style-loader和css-loader

npm install --save-dev style-loader css-loader

修改main.js来引用css  

import css from 'global.css';

修改webpack.config.js  

const path = require('path');
module.exports = {
  mode: "production",
  //所选模式告诉webpack相应地使用其内置优化。"production" | "development" | "none"
  entry: "./src/main.js",
  // 指定入口文件 string | object | array
  output: {
    // webpack 如何输出结果的相关选项
    path: path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径 , 必须是绝对路径（使用 Node.js 的 path 模块）
    filename: "bundle.js", // string | array
    // 出口文件名称
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

最后运行命令打包

npx webpack

代码下载

下载地址：  密码：b969