Webpack:前端资源模块化管理和打包工具

时间 2019-11-20

标签 webpack 前端资源模块化管理打包工具繁體版

原文原文链接

一.介绍：css

　　　　Webpack 是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生html

　　产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader 的转前端

　　换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、　　webpack

　　Coffeescript、 LESS等。web

　　　　Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的express

　　静态资源。npm

二.Webpack 和其余模块化工具备什么区别呢？json

　　1.代码拆分：浏览器

　　2.Loader:缓存

　　3.智能解析：

　　4.插件系统：

　　5.快速运行：

三.安装使用：

　　1.用 cnpm 全局安装 Webpack： cnpm install webpack -g

　　2.本地安装使用：cnpm install webpack --save-dev

　　3.项目初始化：

　　　　（1）.创建mywebpack文件夹并初始化项目：C:\mywebpack>npm init

　　　　（2）.若是不是实际项目能够一路回车完成初始化，安装本地webpack：C:\mywebpack>cnpm install webpack --save-dev 完成安装。可使用 C:\mywebpack>dnpm info webpack 查看webpack 的版

　　　　　　本；也能够看到package.json中例如：

　　　　　　　　"devDependencies": {
　　　　　　　　　　"webpack": "^1.14.0"
　　　　　　　　　}

　　　　　　　　webpack安装成功！

　　　　（3）.使用webpack:

　　　　　　　首先建立一个静态页面 index.html 和一个 JS 入口文件 entry.js：　　　　　　　

　　　　　　　　<!-- index.html --> 　　　　　　　　<html> 　　　　　　　　<head> 　　　　　　　 　　<meta charset="utf-8"> 　　　　　　　　</head> 　　　　　　　　<body> 　　　　　　　　　 <script src="bundle.js"></script> 　　　　　　　　</body> 　　　　　　</html>

　　　　　　// entry.js 　　　　　　document.write('It works.')

　　　　　　而后编译 entry.js 并打包到 bundle.js: C:\mywebpack> webpack entry.js bundle.js

　　　　　　用浏览器打开 index.html 将会看到 It works.　　　　　

　　　　　　接下来添加一个模块 module.js 并修改入口 entry.js：

　　　　　　// module.js 　　　　　　module.exports = 'It works from module.js.'

　　　　　　// entry.js 　　　　　　document.write('It works.') 　　　　　　document.write(require('./module.js')) // 添加模块

　　　　　　从新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.

　　　　（4）.Loader：Webpack 自己只能处理 JavaScript 模块，若是要处理其余类型的文件，就须要使用 loader

　　　　　　　　进行转换。

　　　　　　上一节的例子，咱们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也当作是一个模块，

　　　　　　而后用 css-loader 来读取它，再用 style-loader 把它插入到页面中　　

　　　　　　/* style.css */ 　　　　　　body { background: yellow; }

　　　　　　修改 entry.js：

　　　　　　　　　　　　require("!style!css!./style.css") // 载入 style.css 　　　　　　document.write('It works.') 　　　　　　document.write(require('./module.js'))

　　　　　　安装 loader：

　　　　　　C:\mywebpack>cnpm install css-loader style-loader

　　　　　　若是每次  CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。咱们能够根据模块类型（扩展名）来自动绑定须要的 loader。　　　　　　从新编译打包，刷新页面，就能够看到黄色的页面背景了。
　　　　　　

require

　　　　　　将 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css") ，而后执行：

　　　　　　　　$ webpack entry.js bundle.js --module-bind 'css=style!css' 　　　　　　# 有些环境下可能须要使用双引号 　　　　　　　　$ webpack entry.js bundle.js --module-bind "css=style!css"

　　　　　　显然，这两种使用 loader 的方式，效果是同样的。

　　　　（5）.配置文件：继续咱们的案例，在根目录建立 package.json 来添加 webpack 须要的依赖。　　　

　　　　　　　{
 　　　　　　　　"name": "webpack-example", 　　　　　　　　"version": "1.0.0", 　　　　　　　　"description": "A simple webpack example.", 　　　　　　　　"main": "bundle.js", 　　　　　　　　 "scripts": { 　　　　　　　 　　"test": "echo \"Error: no test specified\" && exit 1" 　　　　　　　　 }, 　　　　　　　　"keywords": [ 　　　　　　　　　　"webpack" 　　　　　　　　], 　　　　　　　　"author": "", 　　　　　　　　"license": "ISC", 　　　　　　　　"devDependencies": { 　　　　　　　　　　"css-loader": "^0.21.0", 　　　　　　　　　　"style-loader": "^0.13.0", 　　　　　　　　　　"webpack": "^1.12.2" 　　　　　　　　　} 　　　　　　　　}

　　　　　　运行C:\mywebpack>cnpm install

　　　　　　而后建立一个配置文件 webpack.config.js：

　　　　　　　　var webpack = require('webpack') 　　　　　　　　module.exports = { 　　　　　　　　entry: './entry.js', 　　　　　　　　output: { 　　　　　　　　path: __dirname, 　　　　　　　　filename: 'bundle.js' 　　　　　　　　}, 　　　　　　　　 module: { 　　　　　　　　　loaders: [ 　　　　　　　　　　{test: /\.css$/, loader: 'style!css'} 　　　　　　　　　] 　　　　　　　　} 　　　　　　　　}

　　　　　　同时简化 entry.js 中的 style.css 加载方式：

　　　　　　require('./style.css')

　　　　　　webpack 经过配置文件执行的结果和上一章节经过命令行 :

　　　　　　C:\mywebpack>webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是同样的.

　　　　（6）.插件：

　　　　　　接下来，咱们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的做用是给输出

　　　　的文件头部添加注释信息。　　　　　

　　　　　　修改 webpack.config.js，添加 plugins：

　　　　　　　　var webpack = require('webpack') 　　　　　　　　module.exports = { 　　　　　　　　entry: './entry.js', 　　　　　　　　output: { 　　　　　　　　 path: __dirname, 　　　　　　　　 filename: 'bundle.js' 　　　　　　　　 }, 　　　　　　　　module: { 　　　　　　　　loaders: [ 　　　　　　　　{test: /\.css$/, loader: 'style!css'} 　　　　　　　　 ] 　　　　　　　　}, 　　　　　　　　plugins: [ 　　　　　　　　new webpack.BannerPlugin('This file is created by zhaoda') 　　　　　　　　] 　　　　　　　　}

　　　　　　而后运行 webpack，打开 bundle.js，能够看到文件头部出现了咱们指定的注释信息：

　　　　　　　　　　/*! This file is created by zhaoda */ 　　　　　　　　　　/******/ (function(modules) { // webpackBootstrap 　　　　　　　　　　/******/ // The module cache 　　　　　　　　　　/******/ var installedModules = {}; 　　　　　　　　　　// 后面代码省略

　　　　（7）.开发环境：

　　　　　　　　当项目逐渐变大，webpack 的编译时间会变长，能够经过参数让编译的输出内容带有进度和颜色：

　　　　　　　　　　C:\mywebpack>webpack --progress --colors

　　　　　　　　若是不想每次修改模块后都从新编译，那么能够启动监听模式。开启监听模式后，没有变化的模块会在编

　　　　　　　译后缓存到内存中，而不会每次都被从新编译，因此监听模式的总体速度是很快的。

　　　　　　　　　　C:\mywebpack>webpack --progress --colors --watch

　　　　　　　　使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静

　　　　　　态资源 web 服务器，而且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 　

　　　　　　能够浏览项目中的页面和编译后的资源输出，而且经过一个 socket.io 服务实时监听它们的变化并自动刷新

　　　　　　页面。

　　　　　　　　# 安装

　　　　　　　　　C:\mywebpack>cnpm install webpack-dev-server -g　　　　

　　　　　　　　# 运行

　　　　　　　　　C:\mywebpack>webpack-dev-server --progress --colors

四.注意事项：记得每次打包到bundle.js的时候须要清空bundle.js中的内容否则文件会被屡次打包加入其中,显示内容会出错。