从零开始webpack4基础配置

首先看一些核心概念：

1.Entry 从 webpack4 开始，再也不必须定义 entry point(入口点) ：它将默认为 ./src/index.js。

2.Output 输出属性规定哪里建立以及如何命名输出文件。默认./dist/main.js为主输出文件和./dist任何其余生成文件的文件夹。

3.Loaders 使用加载器来预处理文件。（如babel-loader、css-loader）

4.Plugins 插件利用webpack的编译过程执行一些任务，如优化、环境变量配置

5.Mode 经过设定mode参数设置为development，production或者none。启用对应于每一个环境的WebPack内置的优化。

6.Browser Compatibility webpack支持全部符合ES5标准的浏览器（不支持IE8及如下版本）。若是要支持旧版浏览器，则须要加载polyfill以支持一些新的语法。

使用init初始化 package.json。

npm init -y

安装webpack、 webpack-cli 模块

npm i webpack --save-dev

在src目录下新建index.js做为入口文件。此时运行npm run build会发现已经有了dist目录。
此时虽然输出了 ./dist/main.js，可是控制台提醒'mode'使用哪一种模式（production(生产) 和 development(开发) 模式。）。

webpack.config.js

module.exports = {
  entry: './src/index.js' //须要打包的文件入口
};

开箱即用，webpack不须要您使用配置文件。可是，它将假定您的项目的入口点为src/index并将结果dist/main.js缩小并优化生产。

使用webpack编译的代码中可用的全部方法。使用webpack捆绑应用程序时，您能够选择各类模块语法样式，包括ES6，CommonJS和AMD，推荐使用ES6。

//3种模块化规范
//AMD
define(function() {
    return function(a, b) {
        return a + b
    }
})
require(['./module/amd'], function(amd) {
    console.log(amd(1, 2))
})

//commonJS
module.exports = function(a, b) {
    return a + b
}
let common = require('./module/common')
console.log(common(1, 2))


//ES6
export default function(a, b) {
    return a + b
}
import es6 from './module/es6'
console.log(es6(1, 2))

webpack.config.js

const path = require('path')

const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: './app.js' // 须要打包的文件入口
  },
  output: {
    publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址
    path: path.resolve(__dirname, 'dist'), // 打包文件目录
    filename: 'bundle.js' // 打包后的 js 文件
  },
  rules: [
    {
      test: /\.js$/, // 使用正则来匹配 js 文件
      exclude: /node_modules/, // 排除依赖包文件夹
      use: {
        loader: 'babel-loader' // 使用 babel-loader
      }
    }
  ],
  "browserslist": [
    "> 1%",
    "last 2 version",
    "not ie <= 8"
  ],
  plugins: [
    new CleanWebpackPlugin(), // 默认状况下，此插件将删除 webpack output.path目录中的全部文件，以及每次成功重建后全部未使用的 webpack 资产。
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: '自动生成 HTML',
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.html' // 根据此模版生成 HTML 文件
    })
  ]
}

参考连接：webpack指南
参考连接：实例带你入门并掌握Webpack4