欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

学习使用webpack打包（打包css和高级js）

程序员文章站 2022-06-15 11:26:57
...

学习使用webpack打包工具

一、概念
1.什么是webpack
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

2.webpack的作用
学习使用webpack打包（打包css和高级js）
通过webpack打包可以将如图左边浏览器不能识别的文件打包转换为右边可识别的js、css等文件。

当然它的功能还有：代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布。
功能太多，我也需要继续探索的，嘿嘿！

二、使用webpack构建一个小的demo

  1. 初始化一个测试目录webpack_example
    1.1在开发工具中安装
//全局安装
npm install -g webpack

安装之前得有node环境，因为npm的使用需要node环境。

1.2创建一个package.json文件

npm init//此命令可创建package.json

1.3package.json建好后，在本项目中安装webpack

// 安装Webpack
npm install --save-dev webpack

1.4在之前的根目录下新建如下
目录结构：
node_modules是安装好webpack时自动构建的
main.js是打包的入口文件
学习使用webpack打包（打包css和高级js）

  1. 写入测试代码（先测试打包高级js语法）
    在index中写入如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack example</title>
</head>
<body>
<script src="bundle.js"></script>
<div>
    <ur>
        <li>1</li>
        <li>2</li>
        <li>3</li>

    </ur>
</div>
</body>
</html>

在main.js中写入

import '../public/css/1.css'
class person{
    static name='aaa'
 }
console.log(person.name)

在webconfig.js中写入

module.exports={
    mode:'development',//构建为开发模式，打包比较快，不会进行代码的压缩  produion会进行代码的压缩
    entry: __dirname+"/app/main.js",//入口文件
    output:{//生成打包文件的路径与名字
        path:__dirname+"/public",
        filename:"bundle.js"
    },
    devServer: {
        contentBase:"./public",//本地服务器加载的页面坐在的位置
        historyApiFallback:true,//不跳转
        inline:true//实时刷新更改的代码
    },
    module:{
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader']},//test :表示匹配的文件类型 use：使用的loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//打包高级js语言
        ]
    }
}

在babel中写入（这是打包js高级语法的必须包）

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

在package.json中添加script

学习使用webpack打包（打包css和高级js）
到这里可以运行看一下效果了（这里用npm run server来运行项目）
server来自package.json中的scripts中的server
学习使用webpack打包（打包css和高级js）
如若不对高级js进行相关的打包配置控制台会报错
学习使用webpack打包（打包css和高级js）

  1. 打包css
    在之前的目录中我们已经建好了一个css文件
    现在往里写入
li{
    list-style: none;
}

这个代码用来去掉表单项前面的点
如果没有对modules中的rules进行如下配置

{test:/\.css$/,use:['style-loader','css-loader']},//test :表示匹配的文件类型 use：使用的loader

运行效果是这样的
学习使用webpack打包（打包css和高级js）
当我们配置了rules后

module:{
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader']},//test :表示匹配的文件类型 use：使用的loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//打包高级js语言
        ]
    }

运行是这样的
学习使用webpack打包（打包css和高级js）
当然不能忘了在入口文件main.js中引入css

import '../public/css/1.css'

以上为初次学习的记录，若有错误感谢指出。

相关标签： webpack 前端

上一篇： Flume学习总结

下一篇： jQuery实现左滑出现删除按钮方法

推荐阅读