Webpack快速入门 （v3.7.1）

新建文件如下结构：

 webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

index.html如下：

  <html>
   <head>
     <title>Getting Started</title>
   </head>
   <body>
    <script src="bundle.js"></script>
   </body>
  </html>

1.安装webpack

npm install --save-dev webpack
npm install --save-dev webpack@<version>  // @<version>  表示指定版本安装 
npm install --global webpack    // --global    表示全局安装

2.配置文件 webpack.config.js

let webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',   // 需要被打包的文件
  output: {                     //  打包后的输出文件
    filename: 'bundle.js',      //  打包后输出文件的名字
    path: path.resolve(__dirname, 'dist')   //  打包后输出文件的路径
  }
};

3.创建bundle
命令行输入 npm install --save lodash
在index.js文件如下：

 import _ from 'lodash';

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

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

4.NPM Scripts

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

在命令行输入 npm run build 即可开始打包。
打包结束后打开index.html观察现象

最后，完整的文件结构如下：

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules
posted @ 2017-10-16 10:12  webLion200  阅读(240)  评论(0)    收藏  举报