前端工程化之webpack的基本使用【待完善！】

webpack的基本使用

webpack的基本使用

当前web开发遇到的一些困境

文件依赖关系错综复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级JavaScript特性兼容性程度较低

等等等！

webpack 概述：

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前 web开发中所面临的困境。
webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。

创建列表隔行变色的项目：

新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package . json
新建src源代码目录
新建src -> index.html 首页
初始化首页基本的结构
运行npm install jquery -s命令，安装jQuery
通过模块化的形式，实现列表隔行变色效果【但是有JavaScript兼容性的问题！】
html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>

<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>

</html>

js文件：

import $ from 'jquery'

$(function() {
    $('li:odd').css('backgroundColor', 'red');
    $('li:even').css('backgroundColor', 'green');
})

2 在项目中安装和配置webpack

1 npm i webpack -D

2 npm i webpack-cli -D

3 在webpack的配置文件中，初始化如下基本配置:

module.exports = {
      // 编译模式！
    mode: 'development' // mode 用来指定构建模式
}

4 在package.json配置文件中的scripts节点下，新增dev脚本如下:

上面的项目就可以完成了！
你要在控制台中执行打包命令：npm run dev

之后你要将你原来的那个html文件中引用的js文件的换成打包好的js文件！

上面两个webpack包建议是单独下载！

还有，建议上面的npm用淘宝的镜像，国内的嘛，速度快！

网址：淘宝镜像设置

3 配置webpack打包的入口与出口

webpack的4.x版本中默认约定：

打包的入口文件为src-> index.js：
打包的输出文件为dist-> main.js

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息：

const path = require('path'); // 导入 node.js 中专门操作路径的模块！
module.exports = {
    mode: 'development', // mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口文件路径
    output: {
        path: path.join(__dirname, './dist'), // 输出文件存放路径
        filename: 'bundle.js' // 输出文件的名称
    }
}

这个主要的作用就是自定义打包文件的存放路径还有名字

最终效果：

还是以我们隔行变色的栗子展示一下！当然，你还要把那个html文件中的引用改成bundle.js偶！如下图：

配置webpack的自动打包的功能

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

报错：
原来的：

原因就是你的webpack和webpack-dev-server还有webpack-cli版本过高导致的
换成如下这种版本号轻松解决
修改后：
最简单的修改方式就是在你的package.json文件里面的依赖的版本，不要用什么卸载webpack的命令，很麻烦！最后在 npm i 下载一遍依赖就行了！

2. 修改 `package.json -> scripts` 中的 `dev` 命令如下:

你也可以新增命令，像我一样!:

        "ag": "webpack-dev-server"

3. 将 src -> index.html中，script脚本的引用路径，修改为"/buldle.js'

4. 运行`npm run ag` 命令，重新进行打包

这儿可能有一些伙伴会犯一个错误！就是他把上边的路径改掉之后！就直接打开html文件！这样是不会生效的!
你得在浏览器中访问http://localhost:8080 才行！
5. 在浏览器中访问http://localhost:8080 地址，查看自动打包效果

注意：

webpack-dev-server会启动一个实时打包的http 服务器

webpack--dev-server打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

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

1 npm i 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' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
});

修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点:


 plugins: 
    [htmlPlugin] // plugins 数组是webpack打包期间会用到的一些插件列表

然后再在你的控制台执行一次打包命令！

这个东西主要用来，自动打包之后，设置刷新的首页面，比如，就设置成index.html页面

6 配置自动打包相关的参数：

需求，在我们打包完成的那一刻让浏览器自动打开页面！
你需要进行如下的一些配置

"explanation3": "// package.j son中的配置 // --open打包完成后自动打开浏览器页面// --host配置IP地址(我们浏览器自动打开的端口号默认是8080【http://localhost:8080/】 可以自行修改 比如127.0.0.1) // --port配置端口",
        "ag": "webpack-dev-server --open --host 127.0.0.1 --port 8013"

你看现在的IP地址已经变成http://127.0.0.1:8080/了，其实端口也是可以进行配置的
如下端口变成了http://127.0.0.1:8013/：

posted @ 2021-01-30 14:20 lvhanghmm 阅读(132) 评论(0) 收藏举报

刷新页面返回顶部

lvhanghmm