webpack知识点总结

webpack环境安装

全局环境安装

npm install webpack-cli -g

npm install webpack -g

mac上安装webpack报错解决方法Hit error EACCES: permission denied, mkdir '/usr/local/lib/node_modules/webpack

解决办法：

sudo npm install webpack -g

或

sudo npm install webpack -g --unsafe-perm=true --allow-root

或

sudo npm install webpack -g --unsafe-perm=true

webpack概述

webpack 的版本更迭

入口文件配置

const path = require("path");

module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(_dirname,"dist"),
    filename: "app.js"
  }  
};

HtmlWebpackPlugin 安装配置

使用命令：

yarn add html-webpack-plugin

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
......
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

babel安装配置

使用命令：

yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev

配置：

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },

未完待续...