第一个 webpack demo

首先新建一个文件夹，我们起名叫做"webpack-first-demo"，新建文件夹后进入这个文件夹，初始化 npm(即运行 npm init)

  cd webpack-first-demo
  npm init

运行成功后会发现在文件夹里会多出一个package.json文件
然后全局安装webpack

  cnpm webpack -g

然后在"webpack-first-demo"文件夹里建立如下目录结构里还没有建立的文件

webpack-first-demo目录结构.png

在./src/bar.js里输入如下代码

// ./src/bar.js
export default function bar () {
    console.log('我是bar文件')
}

在./src/index.js里输入如下代码

// ./src/index.js
import bar from './bar.js'

bar()

在./page.html里输入如下代码

最后在webpack.config.js里输入如下代码，这里输入的是 webpack 的配置代码

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

输入所有的代码后打开命令行进入到webpack-first-demo文件夹里，输入webpack。

webpack

成功后你会发现在该文件夹下多出了node_modules和dist文件夹