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

最新推荐文章于 2024-04-27 08:39:59 发布

Coca~cola

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量981

点赞数

文章标签： webpack 前端

本文链接：https://blog.csdn.net/weixin_44022194/article/details/107136948

版权

学习使用webpack打包工具

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

2.webpack的作用
在这里插入图片描述
通过webpack打包可以将如图左边浏览器不能识别的文件打包转换为右边可识别的js、css等文件。

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

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

初始化一个测试目录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是打包的入口文件

写入测试代码（先测试打包高级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

在这里插入图片描述
到这里可以运行看一下效果了（这里用npm run server来运行项目）
server来自package.json中的scripts中的server

如若不对高级js进行相关的打包配置控制台会报错

打包css
在之前的目录中我们已经建好了一个css文件
现在往里写入

li{
    list-style: none;
}

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

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

运行效果是这样的
前面有黑点
当我们配置了rules后

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

运行是这样的
li前面的点被去掉了
当然不能忘了在入口文件main.js中引入css

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

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

Coca~cola

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习使用webpack打包（打包css和高级js）

学习使用webpack打包工具一、概念1.什么是webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。2.webpack的作用通过webpack打包可以将如图左边浏览器不能识别的文件打包转换为右边可识别的js、css等文件。当然它的功能还
复制链接

扫一扫