webpack使用之基础篇

时间 2019-12-05

标签 webpack 使用基础繁體版

原文原文链接

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

1、基本简介

webpack和requirejs browserify同样，都是一款打包工具，那为何要选这个？咱们进行一个对比html

1. requirejs

很老的产物了，它兴起的时候web模块化的标准都尚未完善。那个时候出了一款基于AMD的打包工具，
不得不说对前端的发展起到了相当重要的做用，若是它能够功成身退了。前端

2. browserify

是一个和webpack差很少同时代的产物，可是它只支持基于commonJS，对于AMD来讲只能兴叹了。
而且它只支持打包js,若是你对这两个缺点不那么在乎，那么就是它了。java

3. webpack

支持AMD和commonJS,以模块化为起点,咱们不只能够用它打包js，也能够打包css，
包括图片。webpack把任何一个文件都当作一个模块，所以你准备好要迎接模块化的挑战了吗？node

2、环境搭建

1. IDE推荐

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

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.jsgit

配置webpackweb

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

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

3、写一个小测试

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

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

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，打包后的文件名

3、写一个小测试

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

4、查看效果

咱们如今可使用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 就能够看到效果了

5、动态效果展现和总结

1. 总共有5个文件

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

2. gif动画

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

3. 演示一下效果

若是以为图小能够点击下面连接查看大图
webpack的简单使用

webpack使用之基础篇

1、基本简介

1. requirejs

2. browserify

3. webpack

2、环境搭建

1. IDE推荐

2. 开始建项目写配置

3、 写一个小测试

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

2. 新建一个css

3.新建一个html

3、 写一个小测试

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

2. 新建一个css

3.新建一个html

4.webpack的重头戏

4、查看效果

5、动态效果展现和总结

1. 总共有5个文件

2. gif动画

3. 演示一下效果

3、写一个小测试

3、写一个小测试