学习使用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

初始化一个测试目录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）

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

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

打包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打包（打包css和高级js）

学习使用webpack打包工具

使用webpack和rollup打包组件库的方法

webpack 打包压缩js和css的方法示例

详解在vue-cli3.0中自定css、js和图片的打包路径

在MVC中使用Bundle打包压缩js和css

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

[Webpack 踩坑] 使用 Webpack 打包 Web 端和 Node 服务端通用的依赖库

打包工具webpack和热加载深入学习

详解如何使用webpack打包JS

详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

webpack3里使用uglifyjs压缩js时打包报错的解决