webpack4 配置

最新推荐文章于 2021-07-30 14:01:48 发布
最新推荐文章于 2021-07-30 14:01:48 发布
阅读量187 收藏
点赞数
分类专栏： 工程化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abudula__/article/details/102653368
版权

步骤

1.建立一个demo文件

index.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Webpcak 配置文件</title>
</head>
<body>
	<h1 id="header">My Project</h1>
	<script src="./dist/bundle.js"></script>
</body>
</html>

还有src目录和两个js文件 index.js 和util.js

util.js

function init() {
	console.log('util works');
}
module.exports = {
	init: init
}

index.js

var util = require('./util');
util.init();
console.log('index works');

2.在src目录里建立css文件夹并且写style.css文件

1.）安装了css-loader ,style-loader
2.)把css文件require到了index.js

require('../src/css/style.css')

3.)在webpack.config.js里设置了css的module,然后执行webpack命令

3.压缩HTML文件

1.)安装werbpack插件 Html-webpack-plugin

npm install --save-dev html-webpack-plugin

2.）在文件目录安装webpack(而不是在全局)

install the webpack-dev-server

3.)在webpack.config.js页面内配置

const webpack = require('webpack'); // 用于引用webpack内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件
​
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

4.安装webpack刷新工具

npm i webpack-save-dev -g

就是全局安装，因为本地安装会需要npm script,因此为了简单，全局安装了,
因为全局安装，因此全局也必须有个webpack

5.跑webpack刷新工具

webpack-dev-server --open

参考的文章
什么是webpack
实现一个简单的Webpack
还学不会webpack？看这篇！
webpack超详细教程！入门一篇就够了

Abudula__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack4配置demo
12-18
通过webpack4搭建开发环境，适合入门，笔记和搭建流程都在里面
Webpack4-的安装和使用
liujun2son
07-11 2642
1.Webpack安装 在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。 ( 例如：webpack --config webpack.config.js ) 在安装 Webpack工具前请确保你的系统安装了5.0.0及以上版本的 Node.js。因为webpack在执行打包压缩等时是依赖node.js的，没有no...
webpack4安装
atu1111的博客
07-30 967
webpack4安装 全局安装webpack （不推荐，进行下一步操作） npm install webpack -g 局部安装webpack(推荐) npm install webpack --save-dev 另外，webpack 4要求安装包 npm install webpack-cli --save-dev
Webpack4系列教程 --- 前言
帕尼尼的博客
12-21 267
写在前面 在学习了webpack4一段时间后，个人感觉webpack4的知识点实在繁杂。所以这个教程我并不打算按照一个个知识点拆开来讲，而是按照相关性来讲解。 参考教程 慕课网 《四大维度解锁 Webpack3 前端工程化》 董沅鑫大神webpack4系列教程 序章 Webpack4系列教程(一) 基础入门 Webpack4系列教程(二) HTML相关 Webpack4系列教程(三) CSS相...
Webpack的全局安装
daponi的博客
11-07 7046
1.window+R键，输入cmd打开命令行工具，输入 mkdir XXXX（XX：文件夹名）； 2.cd XXX 进入刚刚创建好的文件夹里，输入cnpm install -g webpack （安装了淘宝镜像的小伙伴可以直接使用cnpm，没有安装的使用npm）cnpm和npm的区别这里就不多说了，不懂的小伙伴可以百度 3.安装完成后直接输入webpack -v 仍会叫你初始化东西，但还是会报错...
webpack4.x配置入门教程
yoyo勰的博客
01-21 308
webpack4.x入门配置-----一个简单的webpack打包demo示例 一、环境准备 1.1 安装nodejs 可参考http://www.runoob.com/nodejs/nodejs-install-setup.html 1.2 安装webpack 4.x的版本把cli分离出来了，所以还必需安装webpack-cli Webpack可以使用npm安装，新建一个文件夹（此处命名为web...
webpack4config:webpack4配置
03-27
webpack4
Webpack4配置属于自己的React项目源码
03-30
文章地址：https://blog.csdn.net/dKnightL/article/details/83930433，使用react16.8+webpack4配置的项目，项目已经完成es6编译配置，下载完成后解压后还要解压node_module.zip压缩包，解压完node_module压缩包，...
webpack4 配置 ssr 环境遇到“document is not defined”
10-16
主要介绍了webpack4 配置 ssr 环境遇到“document is not defined”，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解多页应用 Webpack4 配置优化与踩坑记录
10-17
主要介绍了详解多页应用 Webpack4 配置优化与踩坑记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webpack4.x安装与使用入门
Winne_Shen的专栏
03-20 1440
安装 在全局安装webpack npm install -g webpack 创建项目 创建新文件夹webpack-study，用于存放项目。命令行定位到该文件夹下。输入以下命令进行初始化。 npm init 然后根据项目情况配置选项或直接回车。 此时发现在该文件夹内新增了一个package.json文件。 安装webpack依赖包 npm install --save-
webpack4.x安装和配置
weixin_30435261的博客
04-11 250
一、全局安装webpack npm install webpack -g 二、创建项目 我们在合适位置新建一个文件夹wpk-test，用于存放我们的项目。命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化： npm init 这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关...
webpack 最好的日志_webpack4升级完全指南
weixin_42509614的博客
01-12 272
webpack4官方已经于近日升级到了V4.5的稳定版本，对应的一些必备插件(webpack-contrib)也陆续完成了更新支持，笔者在第一时间完成了项目由V3到V4的迁移，在此记录一下升级过程中遇到的种种问题和对应的解决手段，方便后续入坑者及时查阅，减少重复工作，如果觉得本篇文章对你有帮助，欢迎点赞????一、Node版本依赖重新调整官方不再支持node4以下的版本，依赖node的环境版本>=...
和webpack有关
hanmou77的博客
04-16 490
安装webpack遇到的一些问题MAC 第一步$ sudo -s 原因分析是：在mac下依赖包要写入系统重要文件夹里，由于没有先获取root权限所以写入失败，导致安装失败。mac 还有一步操作就是，终端先执行如下命令npm install --save-dev webpack -g 输入以上命令后: webpack -v 提示:The CLI moved into a separate packa...
webpack4学习之安装
weixin_33949359的博客
03-29 140
webpack需要在node环境运行，可以去node官网进行下载安装包：http://nodejs.cn/download/ 1、打开cmd命令窗口，运行node -v，若安装了就会显示node版本 2、全局安装webpack：npm install -g webpack（也可以使用淘宝镜像安装：npm install -g cnpm --registry=https://registry.npm...
webpack4XX安装及安装过程中遇到的问题
odelia的博客
10-29 536
当使用webpack4时，确保node.js的版本>=8.9.4 1.node -v 查看node版本 2.全局安装webpack：npm install -g webpack 此时发现有两个警告，fsevent是mac osx系统的，在win或者Linux下使用了 所以会有警告，忽略即可 以下6点内容转载自https://www.cnblogs.com/s...
IDEA使用webpack管理vue前端项目
猫七姑娘的胡同小巷
05-04 3633
IDEA使用webpack管理vue前端项目 文章目录IDEA使用webpack管理vue前端项目webpack介绍安装webpack步骤1.安装node.js。步骤2：安装npm步骤3：安装cnpm步骤4：安装webpack 使用vue.js开发大型应用需要使用webpack打包工具，本节研究webpack的使用方法。 webpack介绍 Webpack 是一个前端资源的打包工具，它可以将js、...
webpack4.x最佳实践-2.webpack基本环境搭建
厚积薄发
06-09 320
webpack环境搭建
webpack4.x深入与实践
热门推荐
snow_small的博客
03-27 1万+
一、什么是webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求...
使用webpack4配置图片压缩
最新发布
06-06
2. 在webpack配置文件中添加以下代码： ```javascript const path = require('path'); const imagemin = require('imagemin'); const imageminMozjpeg = require('imagemin-mozjpeg'); const imageminPngquant = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值