webpack学习--创建一个webpack打包流程

创建一个webpack打包流程

首先安装webpack插件

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

创建index.html文件

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

创建app/index.js文件

'use strict';
import _ from 'lodash';//加载

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

建立一个webpack.config.js文件

var path = require('path');//调用path模块
module.exports = {
  entry: './app/index.js',//入口
  output: {
    filename: './bundle.js',//输出文件
    path: path.resolve(__dirname, 'dist')//输出目录
  }
};

使用npm命令行执行

{
  ...
  "scripts": {
    "build": "webpack -p"
  },
  ...
}

npm run build

package.json

{
  "name": "create",
  "version": "1.0.0",
  "description": "mkdir webpack-demo && cd webpack-demo\r npm init -y\r npm install --save-dev webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build" : "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.4"
  }
}

官网传送门

posted @ 2017-02-13 16:58  IT-caijw  阅读(234)  评论(0)  编辑  收藏  举报