Webpack 学习笔记

Webpack 笔记

安装 webpack

前置条件安装了 node

全局安装 webpack 及 webpack-cli
- npm install -g webpack --registry=https://registry.npm.taobao.org
- npm instal -g webpack-cli --registry=https://registry.npm.taobao.org

快速入门

创建项目并初始化项目

创建并配置 webpack 文件（webpack.config.js）

// 导入 path 模块 （处理路径）
var path = require('path');// module 模块系统对象
// exports 配置选项
module.exports = {// 入口文件entry: "./src/index.js",// 设置模式 development（开发模式） production 生产环境mode: "development",// 输出output: {/*__dirname: 项目的绝对路径打包后的文件存放在 dist 目录下*/path: path.resolve(__dirname, "dist"),// 设置打包后的文件名称filename: "bundle.js"}
}

多入口文件时

entry: {

index: “./src/index.js”,

detail: “./src/detail.js”,

}

入口文件（index.js）

var rd = function (min, max) {return Math.floor(Math.random() * (max - min) + min);
}document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");
document.write(rd(100, 200)+"<br/>");

打包项目

webpack --config webpack.config.js

开发模式下

/** ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").* This devtool is neither made for production nor for readable output files.* It uses "eval()" calls to create a separate source file in the browser devtools.* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)* or disable the default devtool with "devtool: false".* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).*/
/******/ (() => { // webpackBootstrap
/******/    var __webpack_modules__ = ({/***/ "./src/index.js":
/*!**********************!*\!*** ./src/index.js ***!\**********************/
/***/ (() => {eval("var rd = function (min, max) {\r\n    return Math.floor(Math.random() * (max - min) + min);\r\n}\r\n\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\ndocument.write(rd(100, 200)+\"<br/>\");\r\n\n\n//# sourceURL=webpack://project01/./src/index.js?");/***/ })/******/   });
/************************************************************************/
/******/
/******/    // startup
/******/    // Load entry module and return exports
/******/    // This entry module can't be inlined because the eval devtool is used.
/******/    var __webpack_exports__ = {};
/******/    __webpack_modules__["./src/index.js"]();
/******/
/******/ })()
;

生产模式下

(()=>{var r=function(r,t){return Math.floor(Math.random()*(t-r)+r)};document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>")})();

打包项目也可以使用 npm run build

前提是在项目的 package.json 中配置好选项

打包 CSS 文件

在 src 目录下创建 css 文件（base.css）,并在入口文件（index.js）中引入文件

import './base.css'

配置 webpack.config.js

var path = require('path');
module.exports = {entry: "./src/index.js",mode: "development",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"}// 配置 loader 模块module: {rules: [{// 打包 css 文件test: /\.css$/i,use: ["style-loader", "css-loader"]}]}
}

配置前需要下载插件 style loader css-loader

npm install --save-dev style-loader

npm install css-loader

打包文件并启动项目

测试方法：在生产的dist 文件中创建一个 html 文件并将 bundle.js 引入后，打开该文件，此时可以看到 css 样式是否加载成功

打包 scss

安装 sass-loader sass

npm install sass-loader sass --save-dev

module.exports = {module: {rules: [{test: /\.s[ac]ss$/i,use: [// 3 最后把 javascript 写入到bundle.js"style-loader",// 2 再把 css 转成 javascript"css-loader",// 1 将 sass 编译为 css"sass-loader",],},],},
};

打包图片文件

安装 url-loader

npm install url-loader – save-dev

module.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 8192,},},],},],},
};

编译ES6语法

安装 babel-loader

npm install -D babel-loader @babel/core @babel/preset-env

D 等价于 save-dev

module: {rules: [{test: /\.m?js$/,// 排除 node_modules 目录下的文件exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env', { targets: "defaults" }]]}}}]
}

处理 html 模板

安装 html-webpack-plugin

npm i -D html-webpack-plugin

// 打包项目所需的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html模板文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//处理dist目录多余的文件(冗余)// 处理路径的模块
var path = require("path");
// 在模块系统下进行配置
module.exports = {// 入口文件 (多文件)entry: {"index": "./src/index.js","detail": "./src/detail.js"},//  打包模式 development | productionmode: "production",// 输入设置output: {// 路径path: path.resolve(__dirname, "dist"),// 名称filename: "js/bundle-[name].js"},module:{},//  配置插件plugins: [// 处理html模板new HtmlWebpackPlugin({title: "首页", // 网页标题template: "./src/views/index.html",//网页模板filename: "index.html",// 文件名称chunks:["index"] // 添加的脚本 和entry对象下的key是一一对应！！}),new HtmlWebpackPlugin({title: "详情页",template: "./src/views/detail.html",filename: "detail.html",chunks:["detail"]}),new CleanWebpackPlugin()]
}

处理模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body><h1>Hello world</h1>
</body>
</html>

完整版

// 打包项目所需的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html模板文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//处理dist目录多余的文件(冗余)// 处理路径的模块
var path = require("path");
// 在模块系统下进行配置
module.exports = {// 1.0 入口文件 (多文件)entry: {"index": "./src/index.js","detail": "./src/detail.js"},// 2.0 打包模式 development | productionmode: "production",// 3.0 输入设置output: {// 路径path: path.resolve(__dirname, "dist"),// 名称filename: "js/bundle-[name].js"},// 4.0 配置loader模块module: {rules: [// 打包css文件{test: /\.css$/i,use: ["style-loader","css-loader"]},// 打包scss文件（sass）{test: /\.s[ac]ss$/i,use: [// 3. 最后把javascript写入到 bundle.js 文件中"style-loader",// 2. 再把css转成 javascript"css-loader",// 1. 将sass编译为css"sass-loader"]},// 打包图片文件{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {// 1KB = 1024Bytes  // 如果图片大小限制 小于等于8192Bytes  转base64格式字符串（图片文件）// 如果超过8192Bytes 就是显示原来的图片limit: 8192}}]},// 编译ES6{test: /\.m?js$/,// 排除node_modules目录的JS文件exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env', { targets: "defaults" }]]}}}]},// 5.0 配置插件plugins: [// 处理html模板new HtmlWebpackPlugin({title: "首页", // 网页标题template: "./src/views/index.html",//网页模板filename: "index.html",// 文件名称chunks:["index"] // 添加的脚本 和entry对象下的key是一一对应！！}),new HtmlWebpackPlugin({title: "详情页",template: "./src/views/detail.html",filename: "detail.html",chunks:["detail"]}),new CleanWebpackPlugin()]
}

Webpack 学习笔记相关推荐

webpack学习笔记1
webpack学习笔记1:基本概念前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
webpack学习笔记（二）：认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
webpack学习笔记（一）：认识webpack
初识webpack 根据官网介绍, webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具.当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图 ...
webpack学习笔记
看这篇文章的学习总结. webpack工作流程: 1. 配置entry,output. output的配置要注意pubilcPath这个属性,这个属性指明在浏览器中如何加载生成的打包文件.这个属性在加 ...
webpack学习笔记（六）：图片打包处理
本片文章将记录webpack中如何处理图片的打包问题.在介绍图片打包处理之前,先说明一下引入图片的三种方式: 使用背景图片:将一个包裹图片的元素的css中的background属性设置为图片路径使用 ...
我的webpack学习笔记（二）
前言上一篇文章我们讲了多页面js的打包,本篇文章我们继续scss的打包. 多页面css单独打包首先,我们css编写采用的是sass,所以我们先来安装sass-loader以及可以用到的依赖 $ n ...
webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用
webpack-dev-server插件 webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务. we ...
webpack学习笔记--安装
1 首先要安装node Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持 2 npm install webpack -g 通常我们会将 Webp ...
Webpack学习笔记（官网教程）
参考资料:webpack官方指南 GitHub源码:https://github.com/GYQ-LQ/quinn-webpack-demo demo01 安装&起步 (GitHub) 安装 ...

Webpack 学习笔记

Webpack 笔记

安装 webpack

快速入门

打包 CSS 文件

打包 scss

打包图片文件

编译ES6语法

处理 html 模板

完整版

Webpack 学习笔记相关推荐

最新文章

热门文章