一、基础配置

1.创建一个名为demo-webpack的文件夹(名称随意)

2.初始化一个package.json文件

//在cmd窗口中使用以下命令快速创建
npm init -y

3.安装webpackwebpack-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-loadercss-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.htmlbody中添加如下代码

    <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打包的更多相关文章

  1. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  2. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

  3. 在eclipse中配置一个简单的spring入门项目

    spring是一个很优秀的基于Java的轻量级开源框架,为了解决企业级应用的复杂性而创建的,spring不仅可用于服务器端开发,从简单性.可测试性和松耦合性的角度,任何java应用程序都可以利用这个思 ...

  4. 配置一个简单的传统SSM项目

    背景 我们知道,从2002年开始,Spring一直在飞速的发展,如今已经成为了在Java EE开发中的标准,早期的项目都是传统的Spring-SpringMVC-Mybatis项目,打成一个war包丢 ...

  5. 模拟vue实现简单的webpack打包

    一.安装nodejs,查看是否安装成功 二.package.json项目初始化 npm init 电脑有node环境,在根目录下运行命令npm init初始化项目,根据提示输入项目相关信息,然后运行. ...

  6. 从零搭建一个简单的webpack环境

    1.npm Init 2.创建webpack.config.js文件,并配置入口和出口 3.Package.json的script中配置命令对应的操作 .安装webpack-dev-server 模块 ...

  7. 配置一个简单的nfs

    一. 服务端配置 1.1 安装包 服务端基本环境Centos6.5 [root@node1 ~]# yum -y install nfs-utils rpcbind [root@node1 ~]# r ...

  8. 记一个简单的webpack.config.js

    module.exports = { entry: './basic/app.js', output: { path: './assets/', filename: '[name].bundle.js ...

  9. VsCode从零开始配置一个属于自己的Vue开发环境

    vscode vue VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code下载地址:点我去下载插件众多,功能齐全,我在平常开发过程中都是用的它,整理了些自认好用的插件, ...

随机推荐

  1. Qwidget::update

    void QWidget::update ()分析重绘事件激活 1看看手册中这段话 void QWidget::update () [slot] Updates the widget unless u ...

  2. Qt编写控件属性设计器1-加载插件

    一.前言 加载插件是整个属性设计器的第一步要打通的功能,插件中的控件都加载不了,后面就别搞别玩下去了没法玩的,要从一个动态库中加载出来控件,肯定需要用到反射机制,以前做.NET开发的时候就觉得反射这个 ...

  3. java@ 注解原理与使用

    Java反射 java反射机制的定义: 在运行转态时(动态的)时. 对于任意一个类,都能够知道这个类的所有属性和方法 对于任意一个对象,都能够知道调用它的任意属性和方法 Class对象 java中用对 ...

  4. SpringBoot集成Spring MVC视图

    SpringBoot在springmvc的视图解析器方面就默认集成了ContentNegotiatingViewResolver和BeanNameViewResolver,在视图引擎上就已经集成自动配 ...

  5. $().attr() 和 $().css的区别

    使用jquery的.attr( )方法去给div隐藏,这样写的 $("#div_id").attr("display","none"),发现 ...

  6. LeetCode_53. Maximum Subarray

    53. Maximum Subarray Easy Given an integer array nums, find the contiguous subarray (containing at l ...

  7. 【Leetcode_easy】693. Binary Number with Alternating Bits

    problem 693. Binary Number with Alternating Bits solution1: class Solution { public: bool hasAlterna ...

  8. python全栈索引

    书签 python基础 太白金星 TigerLee python基础一 pytcharm安装详细教程 python基础二 python基础数据类型 Python最详细,最深入的代码块小数据池剖析 深浅 ...

  9. 查询父节点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 ...

  10. [LuoguP1155]双栈排序_二分图_bfs

    双栈排序 题目链接:https://www.luogu.org/problem/P1155 数据范围:略. 题解: 神仙题. 就第一步就够劝退了. 这个二分图非常不容易,首先只有两个栈,不是属于一个就 ...