webpack使用之基础篇

头像
奋进的小莫
    阅读 5 分钟
    3

    说到自动化构建，你想到了什么？基于AMD的requirejs？还是基于commoJS的browserify？他们都在各自的领域或者说时代发挥了很重要的作用。
    但是时代的变迁，webpack成了现在的佼佼者，我们不知道什么时候wepback也会被取代，但是现在我们必须要掌握。
    我不担心我学完webpack新东西来了就没用了，相反的我很期待也很高兴有新的东西来取代webpack，因为如果能取代，必然是更好的东西。如果是更好的，那又为什么要拒绝呢？活在当下，认真学习。

    一、基本简介

    webpack和requirejs browserify一样，都是一款打包工具，那为什么要选这个？我们进行一个对比

    1. requirejs

    很老的产物了，它兴起的时候web模块化的标准都还没有完善。那个时候出了一款基于AMD的打包工具，
    不得不说对前端的发展起到了至关重要的作用，如果它可以功成身退了。

    2. browserify

    是一个和webpack差不多同时代的产物，但是它只支持基于commonJS，对于AMD来说只能兴叹了。
    并且它只支持打包js,如果你对这两个缺点不那么在意，那么就是它了。

    3. webpack

    支持AMD和commonJS,以模块化为起点,我们不仅可以用它打包js，也可以打包css，
    包括图片。webpack把任何一个文件都看成一个模块，因此你准备好要迎接模块化的挑战了吗？

    二、环境搭建

    1. IDE推荐

    IDEA、webstrom、sublime、atom 都是很不错的编辑工具，idea大而全，webstrom是idea的简化版、sublime轻量但不失稳重、atom新兴但不失典雅，东西不分上下，重在自己喜欢。找一个自己顺手的就好，顺便一提，我现在主要使用IDEA、辅助atom。因为我是一个java党啊，少不了IDEA，atom的界面是我最喜欢的。

    2. 开始建项目写配置

    a.新建项目 mkdir webpack-study && cd webpack-study
    b.初始化环境 npm init -y
    c.安装工具(如果你没安装taobao源，把cnpm换成npm) npm install --save-dev webpack webpack-dev-server
    说明:webpack是核心文件、wepback-dev-server是类http-server的web启动工具，建议安装一下这个server
    d.新建配置文件 (名字一定不能换) touch webpack.config.js

    1. 配置webpack

    module. exports ={
  entry:'./index.js',
  output:{
    path:__dirname+'/dist',
    filename:'bundle.js'
  }
}

    说明:
    模块化module.export
    入口文件:entry 有几个页面就有几个entry 如果是单页面（spa)，一个entry就够了
    输出 output,path是输出路径,__dirname是nodejs的全局变量，表示当前目录, filename，打包后的文件名

    三、 写一个小测试

    1. 新建入口文件并写入文件

    vim index.js
    document.write('Hello world');

    2. 新建一个css

    touch style.css

      body{
    background-color:pink;
  }

    3.新建一个html

    touch index.html
    写下以下内容

      <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <script src="dist/bundle.js"></script>
  </head>
  <body>
  </body>
  </html>

    说明:
    模块化module.export
    入口文件:entry 有几个页面就有几个entry 如果是单页面（spa)，一个entry就够了
    输出 output,path是输出路径,__dirname是nodejs的全局变量，表示当前目录, filename，打包后的文件名

    三、 写一个小测试

    1. 新建入口文件并写入文件

    vim index.js document.write('Hello world');

    2. 新建一个css

    touch style.css

      body{
    background-color:pink;
  }

    3.新建一个html

    touch index.html
    写下以下内容

      <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <script src="dist/bundle.js"></script>
  </head>
  <body>
  </body>
  </html>

    4.webpack的重头戏

    那就是loaders，wepback的一大特色就是可以将一些浏览器不能原生支持的文件通过loaders编译成浏览器可以支持的文件
    a.安装loaders
    npm install style-loader css-loader
    b.打开webpack.config.js
    添加模块

      module:{
    loaders:[
    {
      test:/\.css$/,
      loaders:['style-loader','css-loader']
      }
  ]

  }

    说明：
    模块下定义大的loaders去loader需要的东西，它是一个数组，意味着它可以定义多个
    一个对象就是一个loader，test用正则匹配文件后缀
    loaders指定采用哪个loader,注意它是从右往左执行，所以这里先执行css-loader
    css-loader处理css的一些url，包括相对的绝对的之类的东西
    style-loader 是将css文件采用js动态写入html页面
    c.使用css
    打开index.js (因为我们这里没有用babel,所以就用es5来写)
    require('./style.css');

    四、查看效果

    我们现在可以使用webpack-dev-server这个东西了
    如果你己经全局安装了(cnpm install -g webpack-dev-server),直接命令webpack-dev-server就可以开起来了，当然你也可以在package.json文件里面添加script，文件如下

    {
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start":"webpack-dev-server --progress",
"build":"webpack --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
  }
}

    这里我们就可以使用npm run build来编译，使用npm run start来开启服务器

    ➜  webpack-study git:(master) ✗ npm run build

> webpack-study@1.0.0 build /Users/xiaomo/workspace/webpack-study
> webpack --progress
Hash: 11ffef2911f2436a3948
Version: webpack 1.13.0
Time: 64ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./index.js 30 bytes {0} [built]
   ➜  webpack-study git:(master) ✗ npm run start

   > webpack-study@1.0.0 start /Users/xiaomo/workspace/webpack-study
   > webpack-dev-server --progcess

   http://localhost:8080/webpack-dev-server/
   webpack result is served from /
   content is served from /Users/xiaomo/workspace/webpack-study
   Hash: 11ffef2911f2436a3948
   Version: webpack 1.13.0
   Time: 80ms
       Asset     Size  Chunks             Chunk Names
   bundle.js  1.42 kB       0  [emitted]  main
   chunk    {0} bundle.js (main) 30 bytes [rendered]
       [0] ./index.js 30 bytes {0} [built]
   webpack: bundle is now VALID.

    b.然后访问 http://locahost:8080 就可以看到效果了

    五、动态效果展示和总结

    1. 总共有5个文件

    webpack.config.ks、index.js、index.html、style.css、package.json，编译好要使用的只有index.html和dist/bundle.js两个文件

    2. gif动画

    会展示一下5个文件的内容

    3. 演示一下效果

    webpack的简单使用
    如果觉得图小可以点击下面链接查看大图
    webpack的简单使用

    webpackjavascriptnode.jsecmascript-6react
    奋进的小莫
    996 声望101 粉丝

    [链接]

    « 上一篇
    mongodb数据库的使用
    下一篇 »
    javscript学习笔记

    引用和评论

    推荐阅读
    头像
    SpringBootUnity--springboot多场景下实际应用的集合

    奋进的小莫阅读 3.6k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新