webpack打包-自用

/**
 * webpack打包
 * npm init -y
 * npm install --save-dev webpack
 * npm install --save-dev webpack-cli
 * package.json中增加 "start": "webpack --config webpack.config.js"
 * package.json中删除 "main": "webpack.config.js",旁边增加"private": true,
 * index.html引入 出口中的index.bundle.js
 * 参考: https://www.webpackjs.com/guides/getting-started/#%E5%9F%BA%E6%9C%AC%E5%AE%89%E8%A3%85
 */

const path = require("path");
module.exports = {
  /**内置的优化 */
  mode: "development", //
  /**入口 */
  entry: "./index.js",
  /**出口
   * path.resolve() 返回一个以相对于当前的工作目录的绝对路径。
   * __dirname 总是指向被执行 js 文件的绝对路径
   */
  output: {
    filename: "index.bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  /**类型转换-loader
   * 如果使用以下则需要控制台执行下载
   * npm install style-loader --save-dev
   */
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "style-loader/url", "css-loader", "sass-loader"],
      },
      { test: /\.vue$/, use: "vue-loader" },
      { test: /\.(png|jpg|gif|svg|mp3)$/, use: "file-loader" },
    ],
  },
};

/**
 * 当前目录结构
 * |-dist
 *    |-index.bundle.js
 * |-img
 *    |-img1
 *    |-img2
 * |-js
 *    |-js1
 *    |-js2
 * |-node_modules
 * |-index.html
 * |-index.js
 * |-package-lock.json
 * |-package.json
 * |-webpack.config.js
 */