面向对象深度解析---webpack 项目搭建

安装依赖

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }

配置指令

"dev": "webpack-dev-server --content-base dist/ --hot --config webpack.config.js --progress --display-modules --colors --display-reasons"
 

--hot  热更新

--config webpack.config.js  默认配置文件

--progress 显示进度

--display-module 显示加载的模块

--colors 显示不同的颜色

--display-reasons 显示原因

配置文件

 webpack.config.js

const path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  // 入口
  entry: './src/js/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js',
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: __dirname + '/node_modules/',
        include: __dirname + '/src',
        options: {
          presets: ['env'],
        },
      },
    ],
  },
  // 插件
  plugins: [
    // html 压缩处理
    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/index.html'),
      excludeChunks: ['node_modules'],
      files: {
        js: ['js/bundle.js'],
        chunks: {
          'main': {
            'entry':  'dist/bundle.js'
          }
        }
      }
    })
  ],
  // 本地服务配置
  devServer: {
    watchOptions: {
      ignored: /node_modules/,
    },
    host: 'localhost',
    port: 3000
  }
}