webpacke的深入浅出

简介

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

安装

1.首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持.
2.用 npm 安装 Webpack：
  $ npm install webpack -g 
  此时 Webpack 已经安装到了全局环境下
  可以通过命令行 webpack -h 检查
通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

实际操作一下

1.mkdir webpack-demo && cd webpack-demo（创建项目文件夹并且进入项目文件夹）

2.npm init -y（文件初始化会出现package.json文件）

3.npm install —save-dev webpack（安装webpack）

4.现在在app的子目录下创建一个index.js文件

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

  /* 需要引入 lodash，下一行才能正常工作 */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

5.要运行这段代码，通常需要有以下 HTML

 <html>
      <head>
        <title>webpack 2 demo</title>
        <script src="https://unpkg.com/lodash@4.16.6"></script>
      </head>
      <body>
            <script src="app/index.js"></script>
       </body>
</html>

6.由于 index.js 并未显式声明需要引入 lodash所以我们需要安装 lodash

npm install --save lodash

7.import lodash(在index.js中添加以下代码)

+ import _ from 'lodash';

function component () {
  ...

8.运行webpack打包生成单个js文件

在项目下打开命令行窗口需要输入命令
webpack index.js bundle.js

9.此时更改index.html引入的js文件

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

这就是简单的webpacke的使用接下来学习使用带有配置的 webpack

对于更复杂的配置，我们可以使用配置文件，webpack 会引用它来打包代码。然后创建一个 webpack.config.js 文件。

1.新建webpack.config.js文件

var path = require('path');

module.exports = {
  entry: './app/index.js',//输入文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')//输出文件
  }
};

2.安装path

在指定文件夹下打开命令行窗口 npm install path --save-dev
path安装完成

3.导出文件

命令行输入：webpack即可

使用引入 npm 的 webpack

1.调整package.json文件

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

2.在命令行窗口输入

npm run build