3-WebPack

一、 什么是WebPack

WebPack可以看做是模块加载、打包工具。

它所做的事情是
1、分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等)。
2、将其打包为合适的格式以供浏览器使用。

工作方式

image
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖模块,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
任何静态资源都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们想要的静态资源。

二、安装

在控制台使用npm安装[需要事先装好node和nmp]

//全局安装 npm install -g webpack 

三、建立项目

1、在上述练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

 npm init -y 

输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。

2、在当前目录下安装 webpack

// 本地安装Webpack npm install --save-dev webpack 

3、回到之前的空文件夹,并在里面创建两个文件夹,src文件夹和build文件夹,src文件夹用来存放我们将写的JavaScript模块,build文件夹用来存放准备给浏览器读取的数据(包括使用webpack生成的打包后的js文件以及一个index.html文件)。

在这里还需要创建三个文件,index.html 文件放在build文件夹中,一个js文件example.js此时项目结构如下图所示

node_modules 文件夹 src 文件夹 example.js bulid 文件夹 index.html package.json 

index.html 文件,示例如下:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack example</title> </head> <body> <script src="./bundle.js"></script> <!-- bundle.js为之后打包后输出的文件 --> </body> </html> 

example.js文件,示例如下:

//安装babel后客使用ES6的模块定义和渲染 并返回一个React组件 import React, { Component } from 'react' //react导入 import ReactDOM from 'react-dom' import json from './test.json' import './style.css' //css导入 import img from './producticon.png'//图片导入 import img2 from './images/a.gif' class App extends Component { render() { return ( <div> <p className="title">{json.text}</p> <p>Example11111111111</p> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root')); 

四、WebPack 配置

1、基础配置

单页面应用里,项目通常会有一个入口(entry)文件,假设是 example.js,我们通过配置 webpack 来指明它的位置。

首先,在项目根目录新建一个 webpack.config.js,这是 webpack 默认的配置文件名称,添加以下内容:

module.exports = { entry: '../src/example.js' // 演示单入口文件 output: { path: __dirname, // 打包后输出文件的保存路径 filename: 'bundle.js' // 打包后输出文件的名称 } } //"__dirname"是Node.js中的一个全局变量,它指向当前执行脚本所在的目录。 

由于配置了webpack的webpack.config.js配置文件,现在我们可以使用webpack命令来打包文件

webpack 

我们的根目录下会多出一个bundle.js文件。

2、本地服务器配置

安装webpack-dev-server

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

添加本地服务器配置

module.exports = { entry: '../src/example.js' output: { path: __dirname, filename: 'bundle.js' } } //本地服务器配置 devServer: { contentBase: "./build",//本地服务器所加载的页面所在的目录 port: 8888, colors: true,//终端中输出结果为彩色 historyApiFallback: true,//不跳转 inline: true//实时刷新 } 

webpack-dev-server 提供了两种模式用于自动刷新页面:

iframe 模式

我们不访问 http://localhost:8080,而是访问 http://localhost:8080/webpack-dev-server/index.html

inline 模式

在命令行中指定该模式,webpack-dev-server –inline。这样 http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。

以上说的两个页面自动刷新的模式都是指刷新整个页面,相当于点击了浏览器的刷新按钮。

webpack-dev-server 还提供了一种 –hot 模式,属于较高阶的应用。

3、快捷命令

npm可以引导任务执行,对其进行配置后可以使用简单的npm build命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可,设置方法如下。

{ "name": "lesson-3", "version": "1.0.0", "description": "", "main": "src/example.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "compile": "babel src/example.js -o example.compiled.js", "run": "babel-node src/example.js", "build": "webpack",//在这里~~ "build-watch": "webpack --w --color", "start": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.18.0", "babel-loader": "^6.2.8", "babel-polyfill": "^6.16.0", "babel-preset-latest": "^6.16.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-0": "^6.16.0", "css-loader": "^0.26.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.24.1", "json-loader": "^0.5.4", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2" }, "dependencies": { "react": "^15.4.0", "react-dom": "^15.4.0" } } 注:package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。 

npm的start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}如npm run build。

五、Webpack的强大功能——生成Source Maps(使调试更容易)

通过简单的配置后,Webpack在打包时可以为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。
在webpack的配置文件中配置source maps,需要配置devtool,它有以下四种不同的配置选项,各具优缺点,描述如下:

devtool选项 配置结果

1、source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度;

2、cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;

3、eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项;

4、cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点;

module.exports = { entry: '../src/example.js' output: { path: __dirname, filename: 'bundle.js' }, devtool: 'eval-source-map'//配置生成Source Maps,选择合适的选项 } 

五、Loaders

通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理,比如说分析JSON文件并把它转换为JavaScript文件,或者说把下一代的JS文件(ES6,ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言,合适的Loaders可以把React的JSX文件转换为JS文件。
安装jsonloader

//json loader npm install json-loader --save-dev //css loader npm install style-loader css-loader --save-dev 
module.exports = { entry: "./src/example.js", output: { path: "./build", filename: "bundle.js" }, devtool: "eval-source-map", module: {//在配置文件里添加JSON loader loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel',//babel query: { presets: ['es2015','react'] } }, {//添加css loader test: /\.css$/, //loader: 'style!css'//添加对样式表的处理,感叹号的作用在于使同一文件能够使用不同类型的loader loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.(jpg|png|gif)$/, loader: "url?limit=8192" //只有不大于8kb的图片才会打包处理成Base64的图片 }, ] }, devServer: { contentBase: "./build",//本地服务器所加载的页面所在的目录 port: 8888, colors: true,//终端中输出结果为彩色 historyApiFallback: true,//不跳转 inline: true//实时刷新 } }; 

六、插件(Plugins)

插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。
Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。

//安装jquery npm install jquery --save 
//example.js中引用 import $ from 'jquery' 

还可以安装其他的插件,并配置在webpack.config.js中,例如:

//webpack.config.js增加 plugins: [ //new webpack.optimize.CommonsChunkPlugin('common.js'), new ExtractTextPlugin("[name].css", {allChunks: true}) // allChunks=true 所有独立样式打包成一个css文件 ], 

原文链接:https://www.cnblogs.com/fengxuefei/p/6250513.html

原创文章,作者:摘自网络,如若转载,请注明出处:https://www.15cov.cn/

本页面内容由网络采集 生成,若侵权请及时联系删除。1606107060@qq.com

发表评论

邮箱地址不会被公开。 必填项已用*标注