Liz's blog hut.

前提已经安装node和npm。创建一个文件夹，这里创建的是webpacklearn文件，cd到该文件夹下，输入命令（快速初始化项目）npm init --yes执行这个命令之后根目录下会多出一个package.json文件。创建步骤First安装webpack及webpack-dev-server（用于开发的本地服务器）$ npm i -g webpack webpack-de...

Loader用于对模块的源代码进行转换，可以使你在 import 或"加载"模块时预处理文件，可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL，甚至允许你直接在 JavaScript 模块中 import CSS文件！使用loader有三种方式，推荐的使用方式是在 webpack.config.js 文件中进行配置。modul...

一、webpack4不是必须要有配置文件默认入口点：./src/index.js默认输出模块包：./dist/main.js若要覆盖以上默认配置，则"scripts"中进行配置。如："build": "webpack -mode production ./enout/index.js --output ./enout/main.js"二、production/development...

前提安装node，npm（新版本的node安装时会同时安装npm）。如果想提高下载安装包时的速度，可以安装淘宝镜像cnpm。接下来，开始讲解webpack的基本构建过程。过程1.在项目目录下，执行npm init --yes，执行完生成一个package.json的文件。2.安装webpack（以下两种方式自选）：npm install --save-dev webpack【本地安装，默...

前言本文将从进行管理资源和管理输出两方面进行记录，两部分都需要用到【webpack】webpack4基本的构建过程中的代码示例管理资源webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。一、加载CSS1.为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 sty...

前言使用开发工具能提高开发效率，但仅用于开发环境，请不要在生产环境中使用它们。Source map以追踪错误和警告。webpack.config.jsconst path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = r...

一、前言前面【webpack】webpack4基本的构建过程和【webpack】webpack之管理资源及管理输出作了一些基本的配置，接下来我们就用vue来开发一个spa应用。二、准备安装并配置babel（1） 安装npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loaderet...