简单的webpack

package.json文件

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "bootstrap": "^3.4.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

webpack.config.js文件

const   path = require('path')
const webpack =require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',// entry是指定打包文件的入口, 可以使用相对路径
    output: {
      path: path.resolve(__dirname, 'dist'),// output是指输出的目录, 必须是绝对路径
      filename: 'bundle.js'
    },
   // mode: 'production'//上线模式
    mode: 'development',//生产模式
    devServer: {
        contentBase: "./src", // 托管的根目录
        hot: true, // 我要开启或关闭HMR
        open: true, // 自动打开浏览器
        port: 3000 // 设置devServer的端口号
      },
      plugins: [
        // 装了插件表示当前项目有资格开启HMR
        new webpack.HotModuleReplacementPlugin(),
        // 安装插件
        // 如果不传入任何配置选项, 默认也会创建一个index.html托管在服务器根路径
        // 只不过这个HTML是空的, title默认是webpack app
        new HtmlWebpackPlugin({
          // title: 'title大法好!!!', // 如果模板中有title, 会覆盖这里的配置
          template: './src/index.html'
        })
      ],
      module: {
        rules: [
          {
            test: /\.css$/,
            // use: [
            //   { loader: 'style-loader' },
            //   {
            //     loader: 'css-loader',
            //     options: {
            //       modules: true
            //     }
            //   }
            // ]
            // css-loader 用于解析css文件
            // style-loader 用于将css代码 使用js动态的插入到html中, 减少二次请求
            // use使用loader时  顺序是固定的从右到左的加载
            use: ['style-loader', 'css-loader']
          },
          // {
          //   test: /\.less$/,
          //   use: ['style-loader', 'css-loader', 'less-loader']
          // },
          // {
          //   test: /\.scss$/,
          //   use: ['style-loader', 'css-loader', 'sass-loader']
          // },
          {
            test: /\.(png|jpg|gif|bmp|jpeg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 81920 // 字节 Byte 如果在8192个字节(8KB)内  就使用base64编码
                }
              }
            ]
          },
          // {
          //   test: /\.(eot|svg|ttf|woff|woff2)$/,
          //   use: [
          //     {
          //       loader: 'url-loader'
          //     }
          //   ]
          // }
        ]
      },
  };

demo:https://github.com/wangmiaozero/function-webpack