从零开始配置一个简单的webpack打包

站长

发表文章数:4343

如何用HAProxy+Nginx实现负载均衡

一、基础配置

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打包

这是因为我们还没有设置打包的模式,所以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文件

NAT-地址转换技术的配置

import './styles/index.css'

④最后,运行npm run build打包,并得到如下报错信息

从零开始配置一个简单的webpack打包

报错部分明确的告诉你'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打包

同样,这里需要配置对应的加载器来加载图片文件。

所以还是老套路,先下载加载器,然后在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/

字节跳动核心竞争力学习与思考

未经允许不得转载作者:站长, 转载或复制请以 超链接形式 并注明出处 xss云之家,资源网,娱乐网,网络技术资源分享平台
原文地址:《从零开始配置一个简单的webpack打包》 发布于2019-12-23

分享到:
赞(0) 打赏 生成海报

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

投稿赚钱
2020年在家赚取零花钱
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册