webpack的使用

👁 2020-08-24

如何使用webpack呢

1 webpack概述

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的的困境。webpack提供了有好的模块化支持、代码压缩混淆、处理js兼容问题、性能优化等强大的功能
目前大多数企业的前端项目，都是基于webpack进行打包构建的。

接下来通过一个小案例对Webpack进行基本的使用。

2 创建列表隔行变色的案例

1.新建一个空白的项目目录，在vscode终端中打开该目录，运行npm init -Y，初始化包管理配置文件package.json

2.在根目录下新建src文件夹，存放源代码，在该文件下下面新建index.html文件，接着在index.html中填写代码

3.运行npm install jquery -S，安装jquery

4.在src文件夹下面新建index.js文件，填写代码如下

import $ from 'jquery'

import './css/index.css'

$(function(){
    $('li:odd').css('backgroundColor','green')
    $('li:even').css('backgroundColor','yellow')

})

然后在index.html文件中利用script标签引入index.js。然后在浏览器中打开会发现没有任何效果。为什么呢？因
为import $ from ‘jquery’属于es6的模块语法，浏览器不支持。解决的方法就是利用webpack，将有兼容性的变成没有兼容性的。

3 在项目中安装和配置webpack

1.运行npm install webpack webpack-cli -D，安装webpack相关的包

2.在项目根目录下，新建webpack.config.js的webpack配置文件

3.在webpack.config.js中，初始化如下配置

module.exports = {

    //编译模式，可以选择开发者模式development是不会把文件进行压缩，提高编译速度,production会把文件进行压缩
    mode:'development'  
}

4.在package.json中的scripts节点下，新增dev脚本。

"scripts":{
    "dev":"webpack"
}

5.在终端中运行npm run dev，启动webpack进行项目打包

然后index.html中引入的js替换成

<script src=”../dist/main.js”></script>

之后隔行变色的效果就实现了。

4 配置打包的入口与出口

webpack的 4.x版本默认约定：打包的入口文件为src下面的index.js，打包的输出文件为dist下面的main.js

如果想要修改打包的入口与出口，可以在webpack.config.js中新增如下配置代码。

const path = require('path')

module.exports = {
    //编译模式
    mode:'development' ,  //可以选择开发者模式development是不会把文件进行压缩，提高编译速度,production会把文件进行压缩
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    }
}

_dirname表示当前文件夹的目录，之后就可以看到dist文件夹中多了bundle.js文件。然后在index.html中手动修改script标签中引入的js文件，修改为bundle.js。

5 配置Webpack自动打包功能

为什么需要自动打包功能，如果直接去修改index.js中的代码，然后在浏览器中查看，会发现，没有任何变化，是因为index.html中引入的js文件是手动打包好的，并不是index.js文件。若是想要有效果，需要重新执行npm run dev进行打包。

1.运行npm install webpack-dev-server -D，安装支持项目自动打包的工具

2.修改package.json中scripts中的dev命令

“scripts”:{
“dev”:”webpack-dev-server”
}

3.将index.html中的script标签中的引用路径修改为”/bundle.js”

4.运行npm run dev进行重新打包

5.在浏览器中访问http://localhost:8080，查看效果

将网址输入浏览器中打开，可以看到这样的页面，打开src就可以直接看到index.html页面了。

webpack-dev-server会启动一个实时打包的http服务器，用于监听代码变化，webpack-dev-server打包生成输出文件，默认放到了项目根目录中，是虚拟的，看不见。

6 配置html-webpack-plugin生成预览页面

如果需要打开index.html页面，需要点击src，这样有点不方便，所以，想要直接输入网址后打开index.html需要进行配置。

1.运行npm install html-webpack-plugin -D，安装生成预览页面的插件

2.修改webpack.config.js文件，添加如下代码

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlplugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
})

module.exports = {
plugins:[htmlplugin],
module:{
    rules:[
        { test:/\.css$/,use:['style-loader','css-loader'] }
    ]
}
}

npm run dev重新启动后，打开网址栏就可以直接显示index.html页面了。

7 配置自动打包相关参数

因为执行npm run dev之后，需要手动复制生成的网址，然后直接在网址栏中打开页面，有点麻烦，使用如下办法可以直接执行命令后打开网页。

打开package.json文件，在scripts中添加如下代码

"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"  //可以只需要--open
}

–open代表打包完成后自动打开浏览器页面

–host代表配置ip地址

–port代表配置端口

8 webpack中的加载器

通过loader打包非js模块。在实际开发中，webpack默认只能打包处理以.js后缀结尾的模块，其他非.js文件webpack默认处理不了，需要调用loader加载器才可以正常打开，否则会报错

8.1 打包处理css文件

在src文件夹下面新建css文件夹，新建index.css文件，填写修改页面样式的代码，然后使用如下代码在index.js中引入index.css文件

import './css/index.css'

1.运行npm install style-loader css-loader -D，安装处理css文件的loader

2.在webpack.config.js中添加如下代码

module.exports = {
module:{
    rules:[
        { test:/\.css$/,use:['style-loader','css-loader'] }
    ]
}
}

test表示匹配的文件类型，use表示对应的要调用的loader

use数组中指定的loader顺序是固定的，多个loader的调用顺序是从后往前调用。

8.2 打包处理less文件

在src下面的css文件夹下面新建index.less文件，填写修改样式的代码，然后在index.js中引入该文件

1.运行npm install less-loader less -D

2.在webpack.config.js文件中添加如下规则

module:{
    rules:[
        { test:/\.less$/,use:['style-loader','css-loader','less-loader'] }
    ]
}

8.3 打包处理scss文件

在src下面的css文件夹下面新建index.scss文件，填写修改样式的代码，然后在index.js中引入该文件

1.运行npm install sass-loader node-sass -D命令

2.在webpack.config.js中添加如下规则

module:{
    rules:[
        { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }
    ]
}

8.4 配置postCSS自动添加css兼容前缀

1.运行npm install postcss-loader autoprefixer -D

2.在项目根目录下新建postcss.config.js文件，填写如下代码

const autoprefixer = require('autoprefixer')

module.exports = {
plugins: [autoprefixer]
}

3.在webpack.config.js中修改css规则

module:{
    rules:[
        { test: /\.css$/ , use: ['style-loader','css-loader','postcss-loader'] }
    ]
}

8.5 打包样式表中图片和字体文件

首先在index.html中添加一个类名为box的盒子，在index.css中添加他的样式，背景图片。刷新网页会发现，什么也没有效果。

1.运行npm install url-loader file-loader -D命令

2.在webpack.config.js中，添加loader规则如下:

module:{
rules:[
{test: /.jpglpnglgiflbmplttfeot /svglwoff|wof2$7,
use: 'url-loader?limit=16940"}
]
}

其中?之后的是loader的参数项。
limit用来指定图片的大小，单位是字节(byte),只有小于limit大小的图片，才会被转为base64图片

8.6 打包处理js文件中的高级语法

1.安装babe1转换器相关的包: npm install babel-loader @babel/core @babel/runtime -D

2.安装babel语法插件相关的包: npm install @babel/preset-env @babel/plugin-transform-
runtime@babel/plugin-proposal-class-properties -D

3.在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下:

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

4.在webpack.config.js文件中的module中的rules添加如下规则

module:{
    rules:[
        { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

9 vue单文件组件

vue单文件组件组成结构：template组件的模板区域、script业务逻辑区域、style样式区域。建议都为style标签添加一个scope属性

在src文件夹下面新建一个components文件夹，然后新建一个app.vue文件

初始化如下代码

<template>
<div><h3>这是app 根组件</h3></div>
</template>

<script>
export default{
    data () {
        return {

        }
    },
    methods: {

    }
}
</script>

<style scoped>
    h3 {
        color: red;
        font-size: 16px;
    }
</style>

然后在index.js文件中导入app.vue组件，终端显示错误，是因为缺少加载器

9.1 webpack中配置vue组件的加载器

1.运行npm install vue-loader vue-template-compiler -D命令

2.在webpack.config.js配置文件中，添加vue-loader的配置项如下:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
plugins:[htmlplugin,new VueLoaderPlugin()],
module:{
    rules:{
        { test: /\.vue$/, use: 'vue-loader' }
    ]
}
}

执行npm run dev之后，发生了错误，如下图，显示vue与vue-template-compiler版本不一致。

解决办法，直接找到node_modules文件夹下面的vue-template-compiler进行删除，然后执行命令

npm i -g vue-template-compiler@2.6.11

问题得到解决。

9.2 在webpack项目中使用vue

1.运行npm install vue -S，安装vue

2.在src下面的index.js入口文件中，通过import Vue from ‘vue’ 来导入vue构造函数

3.创建vue的实例对象，并指定要控制的el区域

4.通过render函数渲染App根组件

在index.js文件中,创建vue实例

const vm = new Vue({
el: '#app',
render: h => h(App)
})

在index.html文件中填充代码

<div id="app">

</div>

10 webpack打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过package. json文件配置打包命令:

在package.json文件中的scripts下面增加属性

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build":"webpack -p"
},

然后执行命令npm run build，对webpack.config.js文件进行读取。根目录下面的dist文件夹可以自行删除了，因为打包时会自动生成dist文件夹以及文件夹里面的文件。

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2020/08/24/webpack/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------