一、webpack简单入门
1、webpack安装
# 安装webpack npm init -y npm install webpack webpack-cli --save-dev # 查看版本 ./node_modules/.bin/webpack -v 4.42.1
2、准备要打包的文件
src/hellowebpack.js
export function hellowebpack() { return 'hellowebpack' }
3、配置webpack.config.js
'use strict' const path = require('path'); module.exports = { // 打包入口 entry: { index: './src/index.js', }, // 指定输出地址及打包出来的文件名 output: { path: path.join(__dirname, 'dist'), filename: 'index.js' }, // 开发环境 mode: 'production', }
4、执行打包
./node_modules/.bin/webpack # dist 文件夹下多出一个index.js文件
5、引用打包文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./index.js" type="text/javascript"></script> </body> </html>
6、配置打包命令
package.json
"scripts": { "build": "webpack" }
打包命令
npm run build
此时的项目结构为：
. ├── dist │ ├── index.html │ └── index.js ├── node_modules ├── package.json ├── src │ ├── hellowebpack.js │ └── index.js └── webpack.config.js
二、loader
配置完之后都需要重新打包生效
1、babel解析es6
cnpm i @babel/core @babel/preset-env babel-loader -D
根目录新建.babelrc 并配置
{ "presets": [ "@babel/preset-env", ] }
配置 webpack.config.js, 添加module属性
'use strict' const path = require('path'); module.exports = { // 打包入口 entry: { index: './src/index.js', }, // 指定输出地址及打包出来的文件名 output: { path: path.join(__dirname, 'dist'), filename: 'index.js' }, module: { rules: [ { test: /.js$/, use: 'babel-loader' } }, // 开发环境 mode: 'production', }
babel编译效果
// 编译前 document.write(() => hellowebpack()) // 编译后 document.write((function(){return"hellowebpack"}))
2、加载css文件
css-loader用于加载css文件并生成commonjs对象
style-loader用于将样式通过style标签插入到head中
npm i style-loader css-loader -D
配置 webpack.config.js
{ test: /.css$/, // 执行的时候是先加载css-loader，将css解析好后再将css传递给style-loader use: [ 'style-loader', 'css-loader', ] }
index.js中引入css文件
public.css
.color-text { font-size: 20px; color: red }
index.js
import { hellowebpack } from './hellowebpack' import "./public.css" document.write(hellowebpack())
3、加载less
npm i less less-loader -D
配置 webpack.config.js
{ test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }
4、加载图片
# url-loader直接内置了file-loader npm i url-loader -D
配置 webpack.config.js
{ test: /.(jpg|png|gif|jpeg)$/, use: [{ loader:'url-loader', options: { // 单位是字节, 如果图片大小小于这个值，就会被打包为base64格式 limit:160000, name: 'imgs/[name].[hash].[ext]' } }] }
三、完整配置
目录结构
$ tree -L 2 . ├── dist │ ├── imgs │ ├── index.html │ └── index.js ├── node_modules ├── src │ ├── demo.png │ ├── hellowebpack.js │ ├── index.js │ └── public.less ├── .babelrc ├── package.json └── webpack.config.js
三个根目录下的配置文件
.babelrc
{ "presets": [ "@babel/preset-env", ] }
package.json
{ "name": "web-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.0", "babel-loader": "^8.1.0", "css-loader": "^3.4.2", "file-loader": "^6.0.0", "less": "^3.11.1", "less-loader": "^5.0.0", "style-loader": "^1.1.3", "url-loader": "^4.0.0", "webpack": "^4.42.1", "webpack-cli": "^3.3.11" } }
webpack.config.js
'use strict' const path = require('path'); module.exports = { // 打包入口 entry: { index: './src/index.js', }, // 指定输出地址及打包出来的文件名 output: { path: path.join(__dirname, 'dist'), filename: 'index.js' }, module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.css$/, // 执行的时候是先加载css-loader，将css解析好后再将css传递给style-loader use: [ 'style-loader', 'css-loader', ] }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /.(jpg|png|gif|jpeg)$/, use: [{ loader: 'url-loader', options: { // 如果图片大小小于这个值，就会被打包为base64格式 limit: 160000, name: 'imgs/[name].[hash].[ext]' } }] } ] }, // 开发环境 mode: 'production', }
参考
