webpack使用之基本篇

2019年8月30日 272次阅读 来源: 奋进的小莫

说到自动化构建，你想到了什么？基于AMD的requirejs？照样基于commoJS的browserify？他们都在各自的范畴或者说时期发挥了很重要的作用。
然则时期的变迁，webpack成了如今的佼佼者，我们不知道什么时刻wepback也会被庖代，然则如今我们必须要控制。
我不忧郁我学完webpack新东西来了就没用了，相反的我很期待也很愉快有新的东西来庖代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的简朴运用

    原文作者：奋进的小莫
    原文地址: https://segmentfault.com/a/1190000005742037
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞