【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件

WebPack的使用

总结：使用WebPack之后，开发模式是，在src目录下进行模块化开发，开发之后使用WebPack打包成浏览器可以解析的bundle.js文件，直接在html中引用该js文件。
WebPack可以帮我们处理模块之间的依赖，并打包。

当前WebPack版本：4.41.5

使用 WebStorm 建立空项目，编写main.js和mathUtils.js

main.js

// WebPack支持各种模块化规范，例如：
// 使用CommonJS的模块化规范
const {add,mul}=require('./mathUtils.js')console.log(add(20,30));
console.log(add(20,40));// 使用ES6的模块化规范
import {name,age,height} from "./info";console.log(name);
console.log(age);
console.log(height);

mathUtils.js

function add(num1, num2) {return num1 + num2;
}function mul(num1, num2) {return num1 * num2;
}module.exports={add,mul
}

使用 WebPack 打包：命令 webpack ./src/main.js -o ./dist/bundle.js
WebPack 可以帮助我们处理各种模块之间的依赖，只要告诉 WebPack 入口是 main.js，它会自动分析依赖；

打包成功后，生成 bundle.js，整体目录结构：

使用生成的bundle.js文件：

点击运行

运行结果

笔记整理

使用npm init初始化一个package.json

使用配置文件

package.json

{"name": "01-webpack_use","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","license": "ISC"
}

打包命令webpack
或者npm run build
WebPack分为全局的WebPack和本地项目目录本地的WebPack，
在WebStorm自带的终端，npm install webpack@3.6.0，安装本地WebPack，指定版本。

在使用时，只要是在终端输入webpack，使用的都是全局的webpack，而在json配置文件定义的webpack脚本会优先在本地中找。

开发时依赖/运行时依赖

如何把css文件也模块化？

根据：webpack 官网示例
安装下列loader：
npm install --save-dev css-loader
npm install style-loader --save-dev

打包命令：npm run build

less-loader 官方示例

使用less文件预处理css
npm install --save-dev less-loader less

添加图片

url-loader 使用示例 - vue 官方文档

配置：webpack.config.js

const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,  // 正则匹配css文件// css-loader只负责将css文件进行加载// style-loader负责将样式添加到DOM中// 使用多个loader时，是从右向左读，下面两个顺序不能换。use: ['style-loader', 'css-loader']},{test: /\.less$/,use: [{loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader"}]},{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 10*1024}}]}]}
}

当加载的图片小于limit（开发中一般配置为8kb）时，会将图片编译成base64
大于limit时，需要使用file-loader npm install file-loader --save-dev，并修改如下配置：

打包后，刷新页面，显示效果：

看背景图片的显示方式，为base64：

下一篇博客：WebPack配置Vue