webpack基本配置

前言

现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决Sass,Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

现在最流行的三个前端框架,可以说和webpack已经紧密相连,框架官方都推出了和自身框架依赖的webpack构建工具。

  • React.js+WebPack
  • Vue.js+WebPack
  • AngluarJS+WebPack

安装

在安装webpack的之前,你首先要安装node、npm,因为webpack是一个基于node的项目,然后

cnpm install -g webpack

介绍

webpack简介:

webpack旨意;让一切变得简单,定义:MODULE BUNDLER

他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图

cmd-markdown-logo

webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的。后期可以根据自己项目的需求,逐渐去添加各种配置文件,完成自己的webpack脚手架。 刚开始配置文件主要分为三大块:

  • entry 入口文件 让webpack用哪个文件作为项目的入口
  • output 出口 让webpack把处理完成的文件放在哪里
  • module 模块 要用什么不同的模块来处理各种类型的文件

简单Demo

创建并格式化项目项目

1
2
3
mkdir londy-webpack
cd londy-webpack
cnpm init

输入完成后,npm终端会问你关于项目的名称,描述……一堆内容,这些内容都不重要,而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时候可以在根目录看到生成的package.json文件了 里面包含了此项目的一些信息

安装webpack-cli

4.X之后的版本,CLI(命令行工具)已经转移到了一个单独的包webpack-cli中。
除了webpack自身外,请额外安装webpack-cli来使用CLI。

cnpm install -g webpack-cli 尽量全局安装

cnpm install webpack-cli -D 这里-D参数和–save-dev的作用相同,只是一种简写而已

如果你使用git管理你的这个项目的话,建议你新建一个.gitignore文件,不要让git提交一些node依赖的模块

node_modules

建立基本项目结构

创建入口文件

  1. 在根目录下创建src文件夹,并创建index.js入口文件
  2. 在根目录下创建dist文件夹,并创建一个基本的index.html文件,在body中引入编译后的main.js

webpack4.x是以项目根目录下的’./src’作为入口,webpack4.x的打包已经不能用webpack 文件a 文件b的方式,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行 webpack --mode developmentwebpack --mode production

设置模式

在这里有两种模式:

  • 开发环境:webpack --mode development
  • 生产环境:webpack --mode production

编辑package.json这个文件中的scripts中加入两个成员

1
2
3
4
5
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development", //开发环境
"build":"webpack --mode production" //生产环境
}

三、配置文件

webpack.config.js就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置。

这是一个没有内容的标准webpack配置模版:

1
2
3
4
5
6
7
module.exports={
entry:{}, //入口文件的配置项 单一入口或者多入口
output:{}, //出口文件的配置项 支持多出口配置
module:{}, //模块:例如解读CSS,图片如何转换,压缩
plugins:[], //插件,用于生产模版和各项功能
devServer:{} //配置webpack开发服务功能
}

基本配置

1
2
3
4
5
6
7
8
9
10
11
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件的配置项 单一入口或者多入口
output: {
path: path.join(__dirname, 'dist'), // 出口目录,dist文件
filename: '[name].[hash].js' //这里name就是打包出来的文件名,因为是单入口,就是main
},
module: {}, //模块:例如解读CSS,图片如何转换,压缩
plugins: [], //插件,用于生产模版和各项功能
devServer: {} //配置webpack开发服务功能
}

多入口、多出口配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const path = require('path');
module.exports = {
entry: {
main: './src/main.js',
index: './src/index.js',
},
//入口文件的配置项 单一入口或者多入口
output: {
path: path.join(__dirname, 'dist'), // 出口目录,dist文件
filename: '[name].[hash].js' //这里name就是打包出来的文件名,因为是单入口,就是main
},
module: {}, //模块:例如解读CSS,图片如何转换,压缩
plugins: [], //插件,用于生产模版和各项功能
devServer: {} //配置webpack开发服务功能
}

配置webpack-dev-server

首先安装 npm install webpack-dev-server -D

修改webpack.config.js

1
2
3
4
5
6
7
devServer: {
contentBase: path.join(__dirname, "dist"), //静态文件根目录
port: 9090, // 端口
host: 'localhost',
overlay: true,
compress: true // 服务器返回浏览器的时候是否启动gzip压缩
}

修改package.json

1
2
3
"scripts": {
"dev": "webpack-dev-server --open --mode development"
}

一个基于基本配置的demo就完成了

直接运行 cnpm run build 就可以看到页面打包的情况了。

常用lodaer及插件介绍

Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。

Loaders实例:

  • 可以把SASS文件的写法转换成CSS,而不在使用其他转换工具。
  • 可以把ES6或者ES7的代码,转换成大多浏览器兼容的JS代码。
  • 可以把React中的JSX转换成JavaScript代码。

注意:所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。

  • test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;
  • use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)。

模块:CSS文件打包

命令: cnpm i style-loader css-loader -D

webpack.config.js Loaders的配置如下

1
2
3
4
5
6
7
8
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader'],
include: path.join(__dirname, 'src'), //限制范围,提高打包速度
exclude: /node_modules/
}
]
  • css-loader用来处理css中url的路径
  • style-loader可以把css文件变成style标签插入head中
  • 多个loader是有顺序要求的,从右往左写,因为转换的时候是从右往左转换的

打包HTML文件

首先安装插件
cnpm install --save-dev html-webpack-plugin

配置webpack.config.js文件

1
2
3
4
5
6
7
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
  • minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
  • hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
  • template:是要打包的html模版路径和文件名称。

CSS中的图片处理

安装命令:cnpm i file-loader url-loader -D

然后在weboack文件中配置如下:

1
2
3
4
5
6
7
8
9
{
test: /\.(png|jpg|gif)/,
use: [{
loader: 'url-loader',
options: {
limit: 500000
}
}]
}


limit是用来判断其图片大小,进行不同的处理方式,当小于设定的值会打包为base64格式的

  • file-loader是解析图片地址,把图片从源文件拷贝到目标文件并且修改源文件名字
  • url-loader可以在文件比较小的时候,直接变成base64字符串内嵌到页面中

我们需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:

  1. 文件大小小于limit参数,url-loader将会把文件转为DataURL(Base64格式);
  2. 文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。

也就是说,其实我们只安装一个url-loader就可以了

CSS分离与图片路径处理

第一个是把CSS从JavasScript代码中分离出来,第二个是如何处理分离出来后CSS中的图片路径不对问题

CSS分离:extract-text-webpack-plugin
安装: cnpm i extract-text-webpack-plugin -D
引入: const extractTextPlugin = require("extract-text-webpack-plugin")
设置Plugins: new extractTextPlugin("/css/index.css")
这里的/css/index.css是分离后的路径位置。这部配置完成后,包装代码:还要修改原来我们的style-loader和css-loader。

在webpack.config.js中修改配置

1
2
3
4
5
6
7
8
9
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
include: path.join(__dirname, 'src'), //限制范围,提高打包速度
exclude: /node_modules/
}

plugins设置保存css的路径

1
2
3
new extractTextPlugin({
filename: 'css/[name].[hash].css'
})

如果最后打包出现错误则安装cnpm i extract-text-webpack-plugin@next -D 针对webpack4.x

图片保存路径

1
2
3
4
5
6
7
8
9
10
{
test: /\.(png|jpg|gif|jpeg|svg)/,
use: [{
loader: 'url-loader',
options: {
outputPath: 'images/', //图片输出路径
limit: 5*1024
}
}]
}

修改出口配置

1
2
3
4
5
output: {
path: path.join(__dirname, 'dist'), // 出口目录,dist文件
filename: '[name].js', //这里name就是打包出来的文件名,因为是单入口,就是main,多入口下回分解
publicPath: '/' //同时要处理打包图片路径问题
}

处理在html中引入图片打包问题

安装:
cnpm install html-withimg-loader --save
配置loader:

1
2
3
4
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}

SASS文件的打包和分离

首先需要安装两个插件node-sasssass-loader
其次在配置文件中配置loader

1
2
3
4
5
6
7
8
9
10
11
{
test: /\.sass$/,
use: ExtractTextWebpackPlugin.extract({
use: [{
loader: 'css-loader'
},{
loader: 'sass-loader'
}],
fallback: 'style-loader'
})
}

自动处理CSS3属性前缀

PostCSS

PostCSS是一个CSS的处理平台,它可以帮助你的CSS实现更多的功能,但是今天我们就通过其中的一个加前缀的功能,初步了解一下PostCSS。

需要安装两个包postcss-loader 和autoprefixer(自动添加前缀的插件)

cnpm install --save-dev postcss-loader autoprefixer

postcss.config.js

postCSS推荐在项目根目录(和webpack.config.js同级),建立一个postcss.config.js文件。

1
2
3
4
5
module.exports = {
plugins: [
require('autoprefixer')
]
}

这就是对postCSS一个简单的配置,引入了autoprefixer插件。让postCSS拥有添加前缀的能力,它会根据 can i use 来增加相应的css3属性前缀。

其次修改我们的webpack.config,js

1
2
3
4
5
6
7
8
9
10
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
}

消除未使用的CSS

cnpm i -D purifycss-webpack purify-css

引入glob

因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

引入purifycss-webpack

同样在webpack.config.js文件头部引入purifycss-webpack

const PurifyCSSPlugin = require("purifycss-webpack")

在webpack.config.js中添加配置

1
2
3
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})

给webpack增加babel支持

Babel是什么? 就是一个转码器

Babel其实是一个编译JavaScript的平台,它的强大之处表现在可以通过便宜帮你达到以下目的:

  • 使用下一代的javaScript代码(ES6,ES7….),即使这些标准目前并未被当前的浏览器完全支持。
  • 使用基于JavaScript进行了扩展的语言,比如React的JSX。

我们先一次性安装这些依赖包
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

.babelrc配置

因为babely有很多的配置项,为了以后不必要的麻烦直接在根目录下创建.babelrc文件

1
2
3
{
"presets":["react","es2015"]
}

.webpack.config.js里的loader配置

1
2
3
4
5
6
7
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}

在这里也可以使用另外一种转码方式env

安装第三方库 Jquery

cnpm install --save jquery

安装时需要注意的时Jquery最终要在生产环境中使用,所以我们这里要使用–save进行安装。

引入方式选择用plugin全局引入:

ProvidePlugin是一个webpack自带的插件,Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件,所以要先再webpack.config.js中引入webpack。

const webpack = require('webpack')

然后在plugins模块添加:

1
2
3
new webpack.ProvidePlugin({
$:"jquery"
})
本文结束感谢您的阅读
0%