webpack 打包js和css, js和css可以打包到一个js

已于 2023-08-16 14:09:21 修改
阅读量2.8k 收藏 2
点赞数
分类专栏： webpack 文章标签： js npm nodejs
于 2020-05-18 16:56:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzheh521/article/details/106157991
版权

一、什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

1.2 webpack 五个核心概念

Entry

入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS)

Plugins

插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。

Mode

模式(Mode)：指示 webpack 使用相应模式的配置。

选项描述特点
development会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。能让代码本地调试运行的环境
production会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。能让代码优化上线运行的环境

详情使用

http://www.woc12138.com/article/45

二、Webpack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

三、初始化项目

1、创建webpack文件夹

进入webpack目录，执行命令

npm init -y

2、创建src文件夹

在这里插入图片描述

3、src下创建common.js

exports.info = function (str) {
    document.write(str);
}

4、src下创建utils.js

exports.add = function (a, b) {
    return a + b;
}

5、src下创建main.js

./common.js 只有js文件后面的后缀可以省略不写

const common = require('./common');
const utils = require('./utils');
​
common.info('Hello world!' + utils.add(1, 2));

四、JS打包

1、webpack目录下创建配置文件webpack.config.js

以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
在这里插入图片描述

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件(把这个文件压缩)
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径(压缩在./dist 这个文件下面)
        filename: 'bundle.js' //输出文件(压缩成的文件)
    }
}

2、命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告

#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

运行npm命令执行打包

npm run dev

3、webpack目录下创建index.html

引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4、浏览器中查看index.html

五、CSS打包

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件(把这个文件压缩)
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径(压缩在./dist 这个文件下面)
        filename: 'bundle.js' //输出文件(压缩成的文件)
    },
    //打包css
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src文件夹创建style.css

在这里插入图片描述

body{
    background:pink;
}

4、修改main.js

在这里插入图片描述
./style.css 后缀.css必须写

在第一行引入style.css
require('./style.css');

5、命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告

6、浏览器中查看index.html

看看背景是不是变成色啦？

yzhSWJ
关注
专栏目录
webpack 合并压缩_webpack 打包压缩js和css的方法示例
weixin_39883208的博客
12-19 578
打包压缩js与css由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆，无需引用额外的插件,其命令 webpack -p 即表示调用UglifyJS来压缩代码，还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS。uglify-js的发行版本只支持ES5，如果...
多个 JavaScript 和 CSS 文件合并成一个文件
qq_43340606的博客
05-05 1469
这里我们创建了一个新任务 combine，它首先运行 js 和 css 任务，然后将合并后的 JavaScript 和 CSS 文件合并到一个文件 all.min.js 中。这将安装所需的 Gulp 插件，包括 gulp-concat（用于将文件合并为一个文件）、gulp-uglify（用于压缩 JavaScript 文件）和 gulp-clean-css（用于压缩 CSS 文件）。然后，将所有需要合并的 JavaScript 文件放在 js 目录下，将所有需要合并的 CSS 文件放在 css 目录下,
webpack-merge-and-include-globally:合并多个文件（js，css ..）并“按原样”运行以包含它们。 支持通过自定义转换和通配符路径进行缩小
05-01
合并到WEBACK的单个文件插件中 Webpack插件可将您的源文件合并到一个文件中，以包含在index.html中，并通过[removed]或<link>分别包含所有文件，从而达到与您相同的效果。 入门 npm install --save-dev webpack-merge-and-include-globally 用法 假设您想使诸如jquery ， moment （包括3种语言）和toastr在全球范围内可用，而您正在努力通过webpack使它们成为全局库，或者只是因为require（）而将其导入（如果它们编写得不好）。将代码包装到新的作用域中，并且您想针对全局作用域执行它，而您不想这样做： < script src =" /node_modules/jquery/dist/jquery.min.js " > </ script > < script src =" /node
假若你有5个不同的 CSS 文件，加载进页面的最好方式
最新发布
My_wife_QBL的博客
07-09 339
在前端开发中，CSS（层叠样式表）是控制网页样式和布局的关键技术。随着项目规模的扩大，通常会有多个CSS文件来组织和管理样式代码。如何高效地将这些CSS文件加载到页面中，是前端开发中一个重要的问题。本文将探讨在有5个不同的CSS文件时，加载进页面的最好方式，并提供详细的分析和实例。
WebPack合并js
mo_xiaolei的博客
11-22 1140
### webpack 命令 - 全局安装 > npm install -g webpack webpack-cli - 安装后查看版本 > webpack -v - 监听 webpack -w ### 初始化项目 1. 创建webpack文件夹 > npm init -y 2. 创建文件夹 3. src下创建common.js - main.js > const util = require("./util"); > const commo
使用webpack合并js文件
热门推荐
WKY_CSDN的博客
07-10 1万+
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前，先说一写webpack的基础知识。1、为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法 模块化，让我们可以把复杂的程序细化为小
Day04-Webpack打包js、css文件
2401_83641098的博客
03-29 896
1、全局安装Webpack2、查看Webpack版本号webpack -v三、初始化项目—Webpack打包js文件1、首先在vscode工作空间中创建文件夹Webpackdemo2、初始化项目环境，点击Webpackdemo文件夹，在终端中打开。3、创建src文件夹4、src下创建common.js5、src下创建utils.jsreturn a+b;6、src下创建main.js四、JS打包1、webpackdemo目录下创建配置文件webpack.config.js。
webpack 打包压缩js和css的方法示例
10-18
另一个是`extract-text-webpack-plugin`，它可以将CSS打包成一个单独的文件，而不是内嵌在JavaScript文件中。 配置文件中通常包含`entry`、`output`、`module`、`resolve`、`plugins`几个主要部分，每个部分负责...
纯html+javascript+css webpack打包的项目
04-12
**纯HTML+JavaScript+CSS Webpack打包项目** 在现代Web开发中，为了提高开发效率和优化网站性能，开发者经常使用Webpack这一强大的模块打包工具。本项目以HTML、JavaScript和CSS为基础，结合Webpack进行资源的管理...
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
10-17
本文介绍了通过两种不同的方法来实现webpack打包时排除特定CSS或JS文件，以及如何单独打包这些文件。第一种方法通过创建一个Node.js脚本来独立处理文件的复制，操作简单且不影响主构建流程；第二种方法则是在webpack...
小牛的前端笔记--用webpack打包js和css文件
weixin_45748968的博客
04-29 1014
js打包 方法一 1.webpack目录下创建配置文件webpack.config.js const path=require("path");//node.js内置模块 module.exports={ entry:'./src/main.js',//配置入口文件为main.js（可更改） output:{ path:path.resolve(__dirname,'./dist'), //输出路径，_dirname:当前文件所在的路径，创建文件dist f
常用JS打包
07-16
常用JS打包
前端性能优化—js代码打包
weixin_34191845的博客
09-09 518
现在的 web 应用，内容一般都很丰富，站点需要加载的资源也特别多，尤其要加载很多 js 文件。js 文件从服务端获取，体积大小决定了传输的快慢；浏览器端拿到 js 文件之后，还需要经过解压缩、解析、编译、执行操作，所以，控制 js 代码的体积以及按需加载对前端性能以及用户体验是十分的重要。 本文从 Tree Shaking 和 代码分割 两部分介绍 js 打包优化，有兴趣的可以跟着一起实践。 c...
webpack合并js文件的几种方式
huzhenv5的博客
03-27 4968
假如我们有两个js文件，a.js和b.js，代码如下： // a.js console.log('这是a文件') // b.js console.log('这是b文件') 我们如何通过webpack把它们合并成一个文件呢？ 方法一 我们可以再webpack配置文件中，配置多个入口文件，这样就能合并成一个文件了： // webpack.config.js const path = require...
webpack打包流程和注意事项！打包多个js和css文件。
Black____White的博客
01-16 3160
先写一下我的例子： const path = require('path'); //因为path是node包里的，所以我们要包path包引入进来 const cleanwpPlug = require('clean-webpack-plugin'); //这里是引用那个清除的插件，注意该插件只能清除一个js module.exports = { entry: {...
webpack3 css,webpack3怎么把多个scss文件合并打包成一个css文件？
weixin_31482671的博客
08-04 656
const path = require('path');const glob = require('glob');const htmlPlugin = require('html-webpack-plugin');const extractTextPlugin = require("extract-text-webpack-plugin");const webpack = require("we...
webpack5 笔记一，集合 js 文件
m0_50823463的博客
12-12 206
目前在我看来，web 前端，应该可以看作就是 HTML、CSS、JS 的集合。😂webpack 就是一个脚手架，方便我们开发，并且提供更多有趣强大的功能。
webpack将所有的css抽取成一个文件以及css浏览器兼容
Fight1124的博客
12-24 511
首先通过命令安装mini-extract-plugin插件然后在需要使用该插件的配置文件中例如webpack.prod.js引入该插件然后注册该插件最后将所有的style-loader替换成最后运行命令即可在打包输出文件夹中找到该css文件了。
webpack 合并压缩_文章 - coolie PK webpack 之一：JS 文件的合并与压缩 - FED社区
weixin_39683858的博客
12-19 173
本文只在前端构建维度上讨论 webpack 和 coolie，分析他们两个工具谁更好、更优秀。关于如何使用 webpack 和 coolie，暂且不在本文讨论范围内。什么是前端构建把 less 文件编译成 css 文件属于构建？把 coffee 编译成 js 属于构建？压缩 JS、CSS 属于构建吗？合并 JS、CSS 属于构建吗？为了方便比较，我们将前端构建分为以下几个部分和权重(满分 100 ...
webpack打包没有输出css文件夹
06-08
如果Webpack打包时没有输出CSS文件夹，可能是因为没有正确配置Webpack的CSS loader和Plugin。可以尝试以下几种方法： 1. 确认webpack.config.js中的module.rules中是否有针对CSS文件的loader配置。例如： ``` module.exports = { // ...其他配置 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, ], }, }; ``` 2. 确认CSS文件是否正确引入。可以尝试在代码中引入一个CSS文件，例如： ``` import './style.css'; // 在代码中使用该CSS const div = document.createElement('div'); div.classList.add('my-class'); document.body.appendChild(div); ``` 3. 确认是否正确安装并配置了相关的插件，例如MiniCssExtractPlugin等。 4. 确认Webpack的output配置是否正确，例如： ``` module.exports = { // ...其他配置 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, }; ``` 如果以上方法都无法解决问题，可以尝试使用其他loader或工具来处理CSS文件，例如sass-loader或者less-loader。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yzhSWJ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值