webpack打包全过程以及遇到图片不显示问题解决方法

webpack打包全过程以及遇到图片不显示问题解决方法

---

---

前言

Webpack是前端构建工具
前端构建工具就是把开发环境代码转化称运行环境代码。开发环境的代码要通过混淆压缩后才能上线运行，这样代码占用内存较小，

---

一、Webpack

一般需要构建工具处理的几种情况

• 代码压缩
  将js、css代码混淆压缩，代码体积更小，运行更快
• 编译语法
  编写CSS时要使用less,Sass，编写js时使用ES6,TypeScript等，这样标准目前无法兼容浏览器，因此需要构建工具编译，
• 模块化
  css和js模块化无法兼容浏览器，为了方便开发环境可以使用既定的模块语法，需要构建工具将模块化语法编译为浏览器可识别形式，使用webpack、Rollup等处理JS模块化。

1、运用场景

1、vue,angular,react都可以通过webpack构建
2、全部可访问页面数目不超过500个

2、安装配置

终端运行
步骤
npm

npm i webpack webpack-cli --save-dev
#说明
#  npm i xxx --save
#  npm i xxx --save-dev
#  --save 会把 依赖包名称添加到package.json文件dependencies键下
#  --save-dev 则添加到package.json文件devdependencies键下
#  dependencies时运行时依赖
#  devDependencies时开发时的依赖

yarn

yarn add jquery #表示通过依赖方式安装jquery
yarn add webpack -D # -D表示通过开发依赖安装

二、案例演示

1、需要安装的工具

终端运行

#可以实现同时打包/(复制)index.html到达dist目录，并自动就引入main.js文件
yarn add html-webpack-plugin -D
#可以实现随时修改源文件，浏览器随时看到修改后的效果无需反复打包
yarn add webpack-dev-server
#不同的代码内容 (less/scss/ES6(ES7)/image/css等等)需**要webpack找到不同的loader(装载器)实现转码、编译、降级处理。**
yarn add css-loader style-loader -D
# loader-安装配置图片相关loader
yarn add url-loader file-loader -D
#说明
# 
# loader-应用less文件
yarn add less-loader less -D

2.配置准备

创建src文件并在里面添加相应的css,js,img文件

在src同层编写webpack.config.js，babel.config.js，index.html,app.js、work.js、
修改package.json，

app.js

import './css/1.css'
import './css/2.less'
let app = require("./work");

work.js

let age = 18
let getname = () => {
   
    return 'ssss'
}

webpack.config.js内容

const ph = require('path')  //路径加载
const HtmlWebpackPlugin = require("html-webpack-plugin") //可以实现同时打包/(复制)index.html到达dist目录
module.exports = {