webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack v4.0.0 开始，可以不用引入一个配置文件。

安装

npm install -g webpacknpm install -g webpack-cli复制代码

需要先全局安装你才可以使用webpack命令，然后再安装到你的项目依赖。如果你使用 webpack 4+ 版本，你还需要安装 CLI。

新建项目

mkdir webpack-demo && cd webpack-demo  //创建并进入webpack-demo文件夹npm init -y   // 初始化项目package.json文件npm install -D webpack webpack-cli  // 本地安装 webpack和webpack-cli复制代码

使用默认配置去构建

mkdir demo1 && cd demo1touch index.htmlmkdir src && cd srctouch index.js复制代码

index.html

  
      
      
      Document    
      复制代码

src/index.js

let a = 1;alert(a);复制代码

执行 webpack 命令。就可以看到文件被打包到dist文件夹了。打开index.html文件就会弹出1。 webpack4.0可以不用写配置文件，然而大多数项目会需要很复杂的设置，需要你自己去配置。

使用配置文件

cd .. // 返回到webpack-demo文件夹touch webpack.config.js  // 创建配置文件touch index.htmlmkdir demo2 && cd demo2  // 创建demo2文件夹mkdir src && cd srctouch index.js复制代码

webpack.config.js

const path = require('path');module.exports = {  entry: './src/index.js',  // 入口文件  output: {  // 出口文件    filename: 'bundle.js',   // 打包后命名为bundle.js    path: path.resolve(__dirname, 'dist') // 输出的路径  }};复制代码

在项目的demo2目录执行webpack。如下图就代表打包成功。打开demo2下面的index.html 就可以弹出我的博客地址。

使用babel转换es6语法 => es5

安装babel

在webpack-demo路径下执行命令

npm install --save-dev babel-loader babel-core babel-preset-env复制代码

把demo2复制一份命名为demo3，在src目录下再新建a.js。 src/a.js

export default lanpangzhi = "blog.langpz.com";复制代码

src/index.js

import lanpz from "./a.js";console.log(lanpz);复制代码

webpack.config.js

const path = require('path');module.exports = {  entry: './src/index.js',  // 入口文件  output: {  // 出口文件    filename: 'bundle.js',   // 打包后命名为bundle.js    path: path.resolve(__dirname, 'dist') // 输出的路径  },  module: {    rules: [      {        test: /\.js$/, // 匹配所有.js结尾的文件        exclude: /node_modules/,  // 忽略node_modules文件夹        use: {          loader: 'babel-loader'  // 使用babel-loader转义        }      }    ]  }};复制代码

新建 .babelrc 文件

touch .babelrc复制代码

.babelrc

{  "presets": ["env"]}复制代码

执行webpack就可以看见打包成功了。

babel-polyfill

由于 Babel 只转换语法(如箭头函数)，你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。在webpack-demo路径下执行命令

npm install --save babel-polyfill  // 安装babel-polyfill复制代码

在 webpack.config.js 中，将 babel-polyfill 加到你的 entry 数组中。

module.exports = {  entry: ["babel-polyfill", "./src/index.js"]};复制代码

执行webpack命令，如下图就成功了。

安装