webpack 学习（一）

最新推荐文章于 2024-10-08 22:47:55 发布

乐呀么勒布朗

最新推荐文章于 2024-10-08 22:47:55 发布

阅读量315

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_39589549/article/details/82144222

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写在前面

说起来webpack大家可能都不陌生，它是目前最流行的打包工具，现在主流的前端三大框架angular，react，vue都已经集成了webpack。在之前的vue项目中，直接用脚手架（vue-cli）的形式搭建项目导致自己本身对webpack的理解和学习不够系统，只是知道简单的命令，却无法对项目中webpack的配置说不出个所以然，所以准备从头学习webpack，一步一步的搭建一个完整的项目，到目前为止，webpack已经更新到webpack 4++了，但是考虑到项目的稳定性，还是以webpack3++的版本为主，此次学习webpack的版本也是3++。现在就开始学习吧。。。

前提条件

在开始之前，请先安装node，如果还对node不了解，请先去node官网下载并安装。

开始

1.创建文件夹webpack_demo
2.在webpack_demo的目录下打开命令行，并输入npm init 命令，初始化项目，初始完成之后会生成package.json文件
3.安装webpack，webpack官网建议本地安装，这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。继续打开命令行，输入npm install –save-dev webpack@version（版本号）, 安装完成后会在package.json生成依赖。
4.在webpack_demo的目录下创建src文件夹，用于保存源码，src同级创建dist文件夹，用于存放打包后的文件，dist文件夹下创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo</title>
</head>
<body>
    <div id="title"></div>
    <script src="./bundle.js"></script>
</body>
</html>

5.在src的目录下创建entry.js文件

document.getElementById("title").innerHTML = "hello webpack";

6.在命令行输入 webpack src/entry.js dist/bundle.js 命令，将entry.js文件打包到dist下，并以bundle命名。
7.打开index.html，页面显示 hello webpack ,就说明已经初步摸到了webpack的门槛了。

注：上面的demo只是初步了解webpack的功能，在实际的项目中是不会这么一步一步的创建文件的，webpack会有一些配置文件来帮我我们解决这个问题，下面就是webpack一些配置文件的学习

配置文件

1.在webpack_demo的目录下创建webpack.config.js文件

const path = require('path');
module.exports = {
    // 文件入口
    entry:{
        entry:'./src/entry.js' // entry这个名称是随便起的
    },
    // 文件出口
    output:{
        // 输出路径 (path是node本身的一个关于文件路径的一个包,
        // 将 path.resolve(__dirname,'dist') 打印出来其实就是dist文件夹的绝对路径)
       path:path.resolve(__dirname,'dist'),
       filename:'bundle.js'// 打包的文件名
    },
    // 编译打包js,css，图片压缩。各种 loaders
    module:{},
    // 插件配置
    plugins:[],
    // 服务配置
    devServer:{}
}

2.在命令行输入webpack，就会自动将entry.js文件自动打包至dist文件夹，并以bundle.js命名。

多入口配置

1.在src文件夹下创建entry2.js 文件

alert('zs');

2.更改webpack.config.js文件

// 更改文件入口，出口
    entry:{
        entry:'./src/entry.js' // entry这个名称是随便起的
        entry2:'./src/entry2.js' // entry2这个名称是随便起的
    },
 // 文件出口
    output:{
        // 输出路径 (path是node本身的一个关于文件路径的一个包,
        // 将 path.resolve(__dirname,'dist') 打印出来其实就是dist文件夹的绝对路径)
       path:path.resolve(__dirname,'dist'),
       filename:'[name].js'// 打包的文件名 [name]表示以入口文件的同名打包
    },

3.更改index.html的js引用

 <script src="./entry.js"></script>
 <script src="./entry2.js"></script>

4.运行index.html页面弹出zs弹框，并且显示hello webpack

服务和热更新

1.更改webpack.config.js文件中的devServer项

// 服务配置
    devServer:{
        // 基本目录结构，监听代码的位置
        contentBase:path.resolve(__dirname,'dist'),
        // ip 地址
        host:'192.168.6.234',
        //开启服务器压缩
        compress:true,
        // 端口
        port:8086
    }

2.安装webpack-dev-server,由于我使用的webpack版本是3++，因此webpack-dev-server版本应该用2++的。在命令行输入
cnpm install webpack-dev-server@2.8.2 --save-dev （cnpm 淘宝镜像，比npm快，使用前先安装cnpm）
3.更改package.json中的配置

script 中配置server命令，之后在命令行里输入 npm run server 就可以启动服务，启动之后在浏览器输入ip地址和端口即可访问服务。注：webpack3.5以上自动会热更新，3.5以下需手动配置，我使用的是3.6.0，因此不用在配置热更新

css-loader 和 style-loader

将css打包编译到js中需要使用到两个loader， css-loader 和 style-loader，style-loader 将css中的url进行处理，将css的url挂载到js里 ; css-loader 对css中的标签进行处理, 下面就开始安装并配置。
1.在src下创建目录css，并在css的目录下创建index.css文件，里面输入样式

body{
    background: red;
    color: white;
}

2.在entry.js中引入 css 文件 import css from './css/index.css';
3.安装 css-loader 和 style-loader
cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
4.配置webpack.config.js文件,对module项进行配置
这里写图片描述
rules里面是各种loader的配置项，test表示需要匹配的文件，use表示用什么loader进行编译打包
其中use项有多种配置方法，如下：

use:['style-loader','css-loader']

也可以这么写，用loader的写法：

loader:['style-loader','css-loader']

推荐使用第一种，可扩展性比较强，可以对各个loader进行分别配置

js压缩插件

使用uglify.js可将js文件进行压缩打包，下面是具体配置。
1.在webpack.config.js的顶部引入uglify.js const uglify = require('uglifyjs-webpack-plugin');
2.在webpack.config.js的plugins项中进行实例化
这里写图片描述
3.在命令行输入 webpack 对代码进行打包，明显发现要比没有引入uglify之前打包的js要小得多。

注：引入uglify.js之后运行 npm run server 会报错，这是因为uglify.js在生产环境中才能使用，开发环境时不要引用

html 压缩插件

1.将dist文件全部删除，将src下的entry2.js文件删除，并将入口配置的entry2删除，在src下新建文件index.html，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo</title>
</head>
<body>
    <div id="title"></div>
</body>
</html>

2.安装html-webpack-plugin cnpm install --save-dev html-webpack-plugin
3.在webpack.config.js的顶部引入uglify.js const htmlPlugin = require('html-webpack-plugin');
4.在webpack.config.js文件的plugins项里配置

plugins:[
        //new uglify()
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true // 压缩时去掉引号
            },
            hash:true, // 文件名后面加hash值防止缓存
            template:'./src/index.html' // 模板文件位置
        })
    ]

配置完成之后，源码打包后，index.html所依赖的js会自动引入到index.html里