webpack基础配置
WebPack是目前前端用于构建自动化开发的一款非常流行的工具,与之前的gulp和grunt功能非常相似,它们都是一款通过JavaScript来构建Web网站的自动化工具!
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
我们可以通过下面的一张图来完理解这一部分的功能
webpack可以全一切变得都非常简单,它提倡模块化进行开发,拼提供通过工具的操作简化和提高前端开发工作
入门
WebPack是基于NodeJs平台运行的,所以,在合作Webpack之前,请先保证自己的开发环境下有NodeJs的运行环境
-
安装Webpack
目前我们所使用的Webpack的版本为webpack3的版本,最新的版本为webpak4的版本,因最新版本对一些插件不支持,并有部分不稳定的情况,我们此处以webpack3为版本进行讲解
$ yarn add webpack webpack-cli --dev
说明:上面的代码是安装的webpack与webpack-cli(在webpack4的版本里面,默认要安装webpack-cli了)
-
编写JS代码,通过webpack来进行打包处理
我们在上面的代码当中,创建了一个app.js和bar.js 然后在app.js中通过ES6的模块化开发,引入了这个文件
正常情况下,我们是不可能在浏览器中使用export与import等这些关键字的,现在,我们可以在这里通过webpack来打印处理一下
$ webpack index.js bundle.js
说明:好面的代码是将index.js通过webpack打包以后,翻译成bundle.js,打包完成以后,我们就可以在浏览器中正常使用这个JS文件了
-
引入文件,查看效果
通过上面的入门,我们发现,其实,使用Webpack并不是很验,至少我们可以得出以后结论
- webpack可以将es6的代码转换成我们浏览器使用的代码(正常情况下,es6的代码需要在nodejs环境下面才能够运行)
- 我们通过webpack可以在进行模块化开发,同时,在模块化开发的过程当中,把这些模块化的代码运行于浏览器(以前的模块化开发,我们只是针对Nodejs的平台)
在这里,我们的Nodejs的一切比较良好的模块化开发特性,以及ES6的一些高效语法就都可以在这里进行使用了
WebPack.config.js的配置
在上面的入门代码里面,我们知道,如果要把我们的代码进行打包处理,则需要手动的去执行一条命令,但是这样操作非常麻烦 ,我们不可能每次更改代码以后都去手动的执行一次命令,这个时候,我们可以通过一个配置文件,来配置我们的Webpack操作
Webpack的配置文件,我们一般命名为webpack.config.js这个文件,在这个文件里面,有四大部分,如下:
- 入口(entry)
- 出口(output)
- loader
- 插件(plugins)
入口(entry)
首先,我们先在项目的根目录下面,创建一个webpack.config.js的文件,然后打开文件,编写如下代码
module.exports = {
entry: './src/index.js'
};
说明:上面的
./src/index.js
代表的就是这个程序的入口文件
出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件。你可以通过在配置中指定一个 output
字段,来配置这些处理过程:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
};
在上面的代码中,我们通过
output.filename
和output.path
属性,来告诉 webpack bundle 的名称,以及我们想要生成到哪里。就像之前的入门里面,我们使用
webpack app.js bundle.js
一样,前面是入口文件,后面是出口文件
在配置完成以后,我们可以在package.json里面配置启动命令,生成我们打包以后的JS代码了
//package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
在scripts
的属性下面添加build
的属性,这个时候执行npm run build
就会调用webpack的命令,webpack就会调用配置文件webpack.config.js
来进行打包了
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
例如,我可以让webpack来处理scss的预处理CSS文件,也可以让webpack来处理vue的文件,这都是webpack所具务的功能,但是,webpack如果想要使用这些功能,必须要使用第三方的模块,而这些第三方的模块,我们就叫做loader
注意,loader 能够
import
导入任何类型的模块(例如.css
文件),这是 webpack 特有的功能,其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的,因为这可以使开发人员创建出更准确的依赖关系图。
在配置loader的时候,里面有两个必填属性,一个是test,一个是use属性:
test
属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。use
属性,表示进行转换时,应该使用哪个 loader。
babel与webpack的结合
我们刚刚说过一件事情,就是我们在使用webpack的时候,可以将我们的es6代码的模块化运用得非常好,但是,有些时候,浏览器必不能识别所有的es6代码,这个时候,我们就需要使用一个第三方模块,来处理我们的es6代码,而这个模块就是babel
Babel是一款非常浏览的代码翻译工具,无论是现在的ES6,还是Vue或React,这些大名鼎鼎的框架都是要基于Babel的,如果脱离了Babel,这些框架运行起来会非常困难
首先,我们要知道 Babel的第三方模块如果去使用。在Babel的中文官网当中,我们可以找到babel在webpack中的配置(在此处说明一下,babel这个第三方模块不只是运行在webpack中,还可以运行在其它的平台),具体使用步骤如下:
-
安装
$ yarn add @babel/core babel-loader @babel/preset-env --dev $ yarn add @babel/polyfill
注意要分开安装,一个是上面的是开发依赖,下面的
@babel/polyfill
是生产依赖 -
通过config进行配置
//webpack.config.js文件 module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use:["babel-loader"] } ] }
说明:上面的代码的意思就是告诉webpack,如果碰到.js的文件,就使用第三方的模块
babel-loader
来进行处理一下,但是并不是所有的js文件都要处理,在node_modules
这里面的文件就不要处理了 -
配置代码的处理方式
我们刚刚都说过了,我们的babel是一个代码翻译工具,它会把我们的代码翻译成我们浏览器认识的语言,可是,我们总要告诉babel我们所使用的语言到底是什么语言吧,这个时候,我们就需要添加一个babel的专用配置文件
我们需要在项目的根目录下面创建一个
.babelrc
这个文件,然后在这个文件当中,配置如下信息://.babelrc文件 { "presets": ["@babel/preset-env"] }
-
配置代码的运行环境
代码的运行环境指当前生成的代码要在什么场景(什么版本的浏览器)下面运行,这个设置可以在当前的
package.json
下面去进行配置{ "name": "webpack1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js", "dev": "webpack-dev-server --config webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.6.4", "@babel/preset-env": "^7.6.3", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", "html-webpack-plugin": "^3.2.0", "postcss-cssnext": "^3.1.0", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "style-loader": "^1.0.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.9.0" }, "browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ], "dependencies": { "@babel/polyfill": "^7.6.0" } }
重点是看上面的的
browserslist
这个部分,这里是配置了浏览的版本 -
配置polyfill的环境
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
//webpack.config.js文件 const config={ entry: ["@babel/polyfill",path.join(__dirname, "./js/index.js")], }
修改config的入口文件entry属性经过的上面的配置以后,我们的js代码就可以转换成ES5的代码在浏览器里面运行了
webpack-dev-server配置
这个插件的主要目的是用地配置webpack的开发环境,因为在开发环境里面,我们不可以每次修改代码以后都重新生成,这个时候,就要实时的修改代码了
webpack-dev-server
这个插件需要使用到一个插件html-webpack-plugin
,现在安装所需要的插件
-
安装插件
$ yarn add webpack-dev-server html-webpack-plugin@next --dev
-
在webpack.config.js里面添加配置信息
//webpack.config.js const config ={ //......前面的代码 //配置webpack的插件 plugins:[ new HtmlWebpackPlugin({ title:"标哥的第一个webpack网页", template:"index.html", filename:"abc.html", //生成的文件名叫abc.html inject:true //将生成的好的JS与CSS都自动插入到这个网页里面去 }) ], devServer:{ port:9999, host:"0.0.0.0", //告诉服务器从哪提供内容,只有在想要提供静态文件时才需要 contentBase:"./dist" } }
-
title代表网页的标题
-
template代表根据那个文件生成新的文件
-
filename代表生成新的文件的名称
-
inject代表是否将生成好的JS与CSS自动插入到网页里面去
上面的plugin指的是webpack的插件,而devServer则是启动
webpack-dev-server
时候的相关信息,例如配置端口号,配置相关IP以及启动目录等 -
-
配置启动命令
在
package.json
里面添加开发环境的启动命令//package.json文件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js", "dev": "webpack-dev-server --config webpack.config.js" }
在
package.json
的文件里面的scripts
属性里面添加dev
属性,然后添加对应命令webpack-dev-server --config webpack.config.js
当我们去执行
npm run dev
的时候,就会启动一个http
服务器,这个服务器的端口号是我们之前配置的9999,我们在地址栏输入http://127.0.0.1:9999/
就可以看到地址了,然后选择要调试的文件,就可以看到我们的HTML页面了
此时我们的目录结构如下图所示
dist目录就是生成文件的目录 .babalrc就是babel的配置文件, index.html就是一个普通的html文件,用于显示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<h2>这是原来的网页</h2>
<div class="div1">12312</div>
</body>
</html>
在网页的标题里面
<%=htmlWebpackPlugin.options.title%>
这一段代码代表插入之前在webpack.config.js
里面配置plugins
里面的插件htlm-webpack-plugin
定义的名称
postcss的使用
在webpack里面,我们需要使用css去设置页面的样式 。当我们写好一个CSS文件以后,需要通过如下的方式去导入
//src/index.js文件
import "./css/index.css"
我们在入口文件这个地方导入了这个文件,但是webpack本身并不能理解css文件【webpack本身只能处理javaScript的文件,非JS的文件需要使用第三方的loader】。所以我们需要用css-loader
。在使用css-loader
的时候,我们可以利一下postcss-loader
。具体说明如下
postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具,通过这个工具,我们可以实现CSS代码的兼容性
postcss有很多第三方的插件,例如postcss-import
可以处理css里面的@import
导入,postcss-cssnext
处理CSS的前缀以提高CSS的兼容性,cssnano
CSS代码生成的时候进行压缩等
-
安装插件
$ yarn add postcss-loader --dev $ yarn add postcss-import postcss-cssnext cssnano --dev
-
在webpack中配置postcss
const config={ //....前面的代码 module:{ rules:[ //......前在贩代码 { test:/\.css$/, exclude: /node_modules/, use:[ "style-loader", "css-loader", "postcss-loader" ] } ] } }
- css-loader是用于让webpack处理以css结尾的文件的
- postcss-loader是用于提高CSS的兼容性的,把CSS做二次处理
- style-loader在开发模式下面使用,因为在开发模式下面,我们把CSS样式做了更改以后,要直接插入到页面的
style
标签里面,这样就可以实时的在页面上面体现效果
-
添加postcss.config.js文件,以加载postcss的插件
在目录下面新建一个postcss.config.js文件,添加如下内容
/** * postcss的配置文件 */ module.exports={ // 加载postcss的插件 plugins:[ require("postcss-import"), require("postcss-cssnext"), require("cssnano") ] }
添加完这个些配置以后,我们就可以直接在js文件里面导入css文件了
//index.js文件 /** * 导出的时候如果有default就不解构, * 如果没有default就解构 */ import Student,{Instructor} from "./Student.js"; //如果没有默认导出的情况之下,我们可以使用这种方式直接拿到里面所有的导出 import * as utils from "./utils.js"; import { util } from "node-forge"; let s=new Student(); s.sayHello(); let instructor = new Instructor(); instructor.sayHello(); console.log(utils.getConn()); //webpack并没有限定import的导入类型 //导了一个CSS文件 非JavaScript文件 import "../css/index.css";
- postcss-import插件处理css里面的
@improt
- postcss-cssnext处理CSS的兼容性
- cssnano插件在CSS打包的时候进行压缩
- postcss-import插件处理css里面的
评论区