webpack基础使用

webpack的四个核心概念

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};  

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。
webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转 换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，为webpack增添处理打包之外的其他的一些功能。

常用配置项

// webpack.config.js
const path=require('path')

module.exports={
  // "production" | "development" | "none"
  mode:"production",

  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  devtool: "source-map", 

  entry: {
    main: "./app/entry-a"
  },

  devServer:{
    // 热更新
    hot:true,
    //默认是 localhost 如果希望服务器外部可访问
    host:'0,0,0,0'
  },

  // webpack 输出结果的相关选项配置
  output: {
    // 所有输出文件的目标路径 必须是绝对路径（使用 Node.js 的 path 模块）
     path: path.resolve(__dirname, "dist"), 
    // 用于多个入口点(entry point)（出口点？）
     filename: "[name].js",
    // 导出库(exported library)的类型  默认值var  
     libraryTarget: "umd", 
  },
  module:{
    rule:[
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
        // test 和 include 具有相同的作用，都是必须匹配选项
        // exclude 是必不匹配选项（优先于 test 和 include）
        // 最佳实践：
        // - 只在 test 和 文件名匹配 中使用正则表达式
        // - 在 include 和 exclude 中使用绝对路径数组
        // - 尽量避免 exclude，更倾向于使用 include
        loader: "babel-loader",
      },
      {
        test: /\.html$/,
        use: [
          // 应用多个 loader 和选项
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },
    ]

  }
}

常用loader和plugins

loader

• babel-loader
• css-loader
• less-loader
• sass-loader
• vue-loader
• url-loader

plugins

• HtmlWebpackPlugin
• CopyWebpackPlugin

参考：webpack中文文档
vue-loader