028-86261949

当前位置:首页 > 技术交流 > webpack入门指南

webpack入门指南

2017/04/17 14:50 分类: 技术交流 浏览:129

1.简介

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。今天跟着我们源码时代php培训学科讲师来学学Webpack的安装以及使用!

2.Webpack的安装

安装Webpack之前必须确保安装了Node.js.

在当下项目中安装

npm install webpack --save-dev

npm install webpack@<version> --save-dev

在当前项目中安装的话, 只能够在项目根目录下/node_modules/.bin/webpack运行webpack命令.

全局安装

npm install webpack -g

全局安装的话,可以在任何项目目录中运行webpack命令

3.项目中可能遇到的问题

通过webpack构建一个项目.

1.创建项目文件夹并且安装本地webpack

mkdir webpack-demo && cd webpack-demo

npm init -y

npm install --save-dev webpack

2.在项目根目录下创建app/index.js

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());

3.在项目根目录下创建index.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>

在index.js运行之前需要依赖ladash.

现在应用程序存在三个问题:

如果index依赖的lodash不存在,就无法使用到lodash中提供的函数.

如果index.js和lodash引入的顺序不对也发生错误.

如果index.js没有使用到lodash,那么加载lodash就没有意义.

4.Webpack解决问题

1.使用npm安装lodash

npm install --save lodash

2.修改app/index.js

import _ from 'lodash';

function component () {

  ...

3.修改index.html

<html>

   <head>

     <title>webpack 2 demo</title>

   </head>

   <body>

<script src="dist/bundle.js"></script>

   </body>

 </html>

4.项目根目录下运行webpack命令(使用全局命令)

webpack app/index.js dist/bundle.js

5.使用webpack的一个配置文件

在项目根目录下创建一个webpack.config.js

var path = require('path');

module.exports = {

  entry: './app/index.js',

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist')

  }

};

entry: 入口文件

output.filename: 输出的文件名

output.path: 输出的文件目录

#标签:webpack,php技术