如何使用webpack创建你的第一个web应用

webpack
webpack做为后来居上的前端自动化构建工具，可以对前端所使用到的主流资源（图片，less，sass，js，html）进行模块化处理，正在快速的取代grunt。
根据官方文档，它具有下面让人惊叹的功能。

  • 将依赖树拆分成按需加载的块
  • 初始化加载的耗时尽量少
  • 各种静态资源都可以视作模块
  • 将第三方库整合成模块的能力
  • 可以自定义打包逻辑的能力
  • 适合大项目，无论是单页还是多页的 Web 应用

    • 下面就让我们入手第一个webpack小应用。

    1.安装webpack
    webpack基于nodejs 安装插件以及库文件依赖于npm

    $ npm install webpack -g

    此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。

    通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

    # 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev

    Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。

    # 查看 webpack 版本信息
$ npm info webpack

# 安装指定版本的 webpack
$ npm install webpack@1.12.x --save-dev

    如果需要使用 Webpack 开发工具，要单独安装：

    $ npm install webpack-dev-server --save-dev

    2.开始使用

    #用于生成package.json配置文件
$ npm init

    1.新建入口文件index.js，功能是让控制台打印一个“hi”

    document.addEventListener('DOMContentLoaded',function(){
    console.log("hi")
})

    2.新建webpack.config.js

    module.exports={
    entry:'./index.js',  //入口文件
    output:{
        path:__dirname,
        filename:'bundle.js'  //生成文件
    }
}

    3.新建index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world</h1>
<button>go</button>
</body>
<!-引入生成的文件->
<script src="./bundle.js"></script>
</html>

    4.打开命令行 进入项目目录 运行

    //目录 webpack
E:\test\testwebpack>webpack


    如果您在命令行中看到上面的提示信息，说明编译成功！

    5.在浏览器中运行index.html

    可以看到控制台已经打印出了“hi”
    这样一个webpack的小应用就完成了 ，下面我们看看如何引入外部的库 如jquery

    3.加载jquery

    1.在命令行 使用npm安装jquery

    $ npm install jquery --save-dev

    2.然后修改index.js

    //加载jquery模块
var $ =require('jquery')
document.addEventListener('DOMContentLoaded',function(){
    console.log("hi")
    //使用jquery给index.html上面的button加一个点击事件
    $("button").click(function(){alert("000000");})
})

    其他不用变

    3.继续打开命令行 进入项目目录 运行

    //目录 webpack
E:\test\testwebpack>webpack

    结果

    细心的同学会发现bundle.js已经由1.64KB变成了274KB，这是因为我们的bundle.js已经整合了jquery。

    4.在浏览器中刷新index.html，点击“go”

    【完】
    注：本文献属于原创内容，转载时请注明。
    PS：本文章部分文献参考“webpack中文指南”：http://webpackdoc.com/index.html

      共有 0 条评论

      Top
      ×