Webpack学习笔记 配置文件的说明

2021年11月22日 阅读数:7
这篇文章主要向大家介绍Webpack学习笔记 配置文件的说明,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

 请查看 配置文件的注释javascript

const HtmlWebpackPlugin = require('html-webpack-plugin'); //经过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');  //node 内置的模块用来设置路径

const config = {
  entry: './path/to/my/entry/file.js',// 入口文件的配置
  output: {                           // 出口/输出 文件的配置
    filename: 'my-first-webpack.bundle.js', // 输出的文件名
    //publicPath:'资源路径',                 //设置提供资源服务时带有强制性、之后找资源必须在该路径下找
    path: path.resolve(__dirname, 'dist')   // 输出文件的路径
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,           // 用到了正则、 $表示以 什么结尾, \表转义  ^表以什么开头
        use: 'babel-loader'         // 至关于上面一行代码找到js/jsx文件,而后使用babel-loader 加载他们
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),   // 插件
    new HtmlWebpackPlugin({template: './src/index.html'}), //根据一个模板页面生成一个新的页面
  ]
};

module.exports = config;
  1. 使用url-loader 必定要用到file-loader
  2. css-loader只负责加载css模块,要使样式生效,须要使用style-loader