从零开始配置一个简单的webpack打包
一、基础配置
1.创建一个名为demo-webpack的文件夹(名称随意)
2.初始化一个package.json
文件
//在cmd窗口中使用以下命令快速创建
npm init -y
3.安装webpack
和webpack-cli
到开发依赖下
npm i webpack -D
npm i webpack-cli -D
4.配置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
5.创建入口文件src/index.js
6.运行npm run build
命令测试打包是否正常
打包后将会自动创建dist/main.js
文件,也就是默认的出口文件
(到这一步为止,目前的目录结构)
├─dist
└─main.js
├─node_modules
├─src
└─index.js
├─package.json
└─package-lock.json
7.配置打包模式
在第6步的时候,你将会看到如下的警告:
这是因为我们还没有设置打包的模式,所以webpack
默认以生产(production)模式完成打包
开始配置
需要在根目录下创建
webpack
默认配置文件webpack.config.js
// 内容如下:打包模式分为两种development(开发模式打包) production生产模式打包
const config = {
mode: "development"
}
// 这里可以直接导出上面的对象,但是使用变量保存可以使代码更美观
module.exports = config
配置完以上内容后再运行npm run build
就会发现先前的警告信息消失了。
8.配置入口文件和出口文件
默认的出口文件为
dist/main.js
默认的入口文件为
src/index.js
依旧是在
webpack.config.js
中配置
+ // 引入path模块处理路径问题
+ const path = require('path')
const config = {
mode: "development",
+ entry: "./src/index.js",
+ output: {
+ path: path.join(__dirname, './dist'),
+ filename: "main.js"
+ }
}
module.exports = config
二、loader配置
通过以上的步骤就已经搭建了一个简单的webpack架子,然后让我们添加一个css文件来测试下打包
- 先在根目录下新建一个
index.html
,然后再新建一个src/styles/index.css
文件 - 内容如下
①在index.html
中添加一些简单的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
②在src/styles/index.css
添加一些简单的样式
body {
background-color: pink;
}
③在index.js
中引入css文件
import './styles/index.css'
④最后,运行npm run build
打包,并得到如下报错信息
报错部分明确的告诉你'You may need an appropriate loader to handle this file type'
翻译过来大致就是:你或许需要一个适当的加载器来处理这个类型的文件
所以接下来我们需要下载用于解析CSS文件的loader
- 直接使用如下命令安装
style-loader
和css-loader
npm i style-loader css-loader -D
- 然后在
webpack.config.js
中添加如下配置
const config = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.join(__dirname, './dist'),
filename: "main.js"
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
}
- 最后运行
npm run build
就可以打开根目录下的index.html
文件预览一番了
什么?你说页面有点丑? 那告诉你怎么打包一个优美的图片好了
操作如下:
①在
src/assets
文件夹下放入一张优美的图,这里放入的是pretty.png
②在
index.html
的body
中添加如下代码<div id="app">
<img id="img" src="nothing.png" alt="">
</div>
③在
src/index.js
中导入这张图片并动态设置给img
标签
import pic from './assets/pretty.png'
const img = document.getElementById('img')
img.src = './dist/' + pic;
④运行npm run build
打包,并得到如下报错
同样,这里需要配置对应的加载器来加载图片文件。
所以还是老套路,先下载加载器,然后在webpack
中配置一下
①安装file-loader
加载器
npm i file-loader -D
②在webpack.config.js
中添加配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.png$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
③运行npm run build
就可以看到优美的图片了
PS:
- 如果这里你用的不是
.png
后缀的图片的话,需要在上面正则匹配(test: /\.png$/
)中修改一下哈 - 因为
webpack
最初是用于打包js文件的,所以如果想要打包其它类型的文件都需要配置对应的loader - 配置的方法和上面讲述的都大同小异,加载器在
webpack
官方也都有列出不少 - 地址:https://www.webpackjs.com/loaders/
从零开始配置一个简单的webpack打包的更多相关文章
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- 大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...
- 在eclipse中配置一个简单的spring入门项目
spring是一个很优秀的基于Java的轻量级开源框架,为了解决企业级应用的复杂性而创建的,spring不仅可用于服务器端开发,从简单性.可测试性和松耦合性的角度,任何java应用程序都可以利用这个思 ...
- 配置一个简单的传统SSM项目
背景 我们知道,从2002年开始,Spring一直在飞速的发展,如今已经成为了在Java EE开发中的标准,早期的项目都是传统的Spring-SpringMVC-Mybatis项目,打成一个war包丢 ...
- 模拟vue实现简单的webpack打包
一.安装nodejs,查看是否安装成功 二.package.json项目初始化 npm init 电脑有node环境,在根目录下运行命令npm init初始化项目,根据提示输入项目相关信息,然后运行. ...
- 从零搭建一个简单的webpack环境
1.npm Init 2.创建webpack.config.js文件,并配置入口和出口 3.Package.json的script中配置命令对应的操作 .安装webpack-dev-server 模块 ...
- 配置一个简单的nfs
一. 服务端配置 1.1 安装包 服务端基本环境Centos6.5 [root@node1 ~]# yum -y install nfs-utils rpcbind [root@node1 ~]# r ...
- 记一个简单的webpack.config.js
module.exports = { entry: './basic/app.js', output: { path: './assets/', filename: '[name].bundle.js ...
- VsCode从零开始配置一个属于自己的Vue开发环境
vscode vue VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code下载地址:点我去下载插件众多,功能齐全,我在平常开发过程中都是用的它,整理了些自认好用的插件, ...
随机推荐
- Qwidget::update
void QWidget::update ()分析重绘事件激活 1看看手册中这段话 void QWidget::update () [slot] Updates the widget unless u ...
- Qt编写控件属性设计器1-加载插件
一.前言 加载插件是整个属性设计器的第一步要打通的功能,插件中的控件都加载不了,后面就别搞别玩下去了没法玩的,要从一个动态库中加载出来控件,肯定需要用到反射机制,以前做.NET开发的时候就觉得反射这个 ...
- java@ 注解原理与使用
Java反射 java反射机制的定义: 在运行转态时(动态的)时. 对于任意一个类,都能够知道这个类的所有属性和方法 对于任意一个对象,都能够知道调用它的任意属性和方法 Class对象 java中用对 ...
- SpringBoot集成Spring MVC视图
SpringBoot在springmvc的视图解析器方面就默认集成了ContentNegotiatingViewResolver和BeanNameViewResolver,在视图引擎上就已经集成自动配 ...
- $().attr() 和 $().css的区别
使用jquery的.attr( )方法去给div隐藏,这样写的 $("#div_id").attr("display","none"),发现 ...
- LeetCode_53. Maximum Subarray
53. Maximum Subarray Easy Given an integer array nums, find the contiguous subarray (containing at l ...
- 【Leetcode_easy】693. Binary Number with Alternating Bits
problem 693. Binary Number with Alternating Bits solution1: class Solution { public: bool hasAlterna ...
- python全栈索引
书签 python基础 太白金星 TigerLee python基础一 pytcharm安装详细教程 python基础二 python基础数据类型 Python最详细,最深入的代码块小数据池剖析 深浅 ...
- 查询父节点parentNode
示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE htm ...
- [LuoguP1155]双栈排序_二分图_bfs
双栈排序 题目链接:https://www.luogu.org/problem/P1155 数据范围:略. 题解: 神仙题. 就第一步就够劝退了. 这个二分图非常不容易,首先只有两个栈,不是属于一个就 ...