webpack 入门指南

webpack

第一步：创建webpack-demo目录，并且切到这个目录下面，随后初始化生成package.json且安装webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

第二步：详细操作步骤
（1）安装lodash

npm install --save lodash

（2）随后创建 app 子目录下创建一个 index.js 文件。

//引入lodash
import _ from 'lodash';

function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['hello', 'world'], ' ');
  return element;
}
document.body.appendChild(component());

（3）在app目录下创建index.html

(4) 在app目录下创建webpack.config.js

var path = require('path');

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

(5) package.jsont中添加配置

"scripts": {
        "build":"webpack"
 },

第三步：运行

npm run build

第四步：用浏览器打开index.html查看效果

效果