帕尼尼的博客

写在前面在这篇博客中，我将会你介绍多页面解决方案基本配置目录结构代码module.exports = { entry: { pageA: './src/pageA.js', pageB: './src/pageB.js' }, output: { filename: '[name].bundle.js', ...

写在前面在这篇博客中，我将会你介绍图片处理部分的相关配置基础配置CSS中引入图片需要使用file-loader首先我们把一些图片放在src/assets/imgs目录下，并且引入这些图片然后我们配置一条rule：图片文件交给file-loader处理{ loader: 'file-loader', options: { outputPath: '...

写在前面在这篇博客中，我将会你介绍CSS部分的相关配置基本配置我们先看一下目录结构然后，我们在入口文件index.js中引入base.less文件import './css/base.less';这样子是不行的。我们知道，webpack是只能识别JS的，对于Css及Less的处理，我们需要借助相应的loader我们安装这几个loadercnpm i -D less less...

写在前面在这篇博客中，我将会你介绍JS部分的相关配置基本配置我们先看一下目录结构打包时，根据entry配置entry: { index: './src/index.js' }并且我们在入口文件里引入了文件base.jsrequire('./common/base.js');console.log('我是入口文件');首先会执行base.js，然后执行index.js，...

写在前面在这篇博客中，我将会介绍webpack4中有关html部分的相关配置在上篇文章中，我已经介绍了output是打包的入口，但是我们知道打包后的文件是js文件，而我们访问网站的时候首先访问的是html文件。我们当然可以在打包后的文件夹里（这里是dist目录）创建一个html文件，然后把打包好的js挂载到html上。但我们不必这样做，借助一个html插件即可完成html-webpack...

写在前面在这篇博客中，我将会介绍webpack4的基本配置安装与配置首先我们要安装相关环境cnpm i -D webpack webpack-cli目录结构如下webpack.config.js 是默认的配置文件，我们写下最基本的配置module.exports = { entry: { index: './src/index.js' }, ...

写在前面在学习了webpack4一段时间后，个人感觉webpack4的知识点实在繁杂。所以这个教程我并不打算按照一个个知识点拆开来讲，而是按照相关性来讲解。参考教程慕课网 《四大维度解锁 Webpack3 前端工程化》董沅鑫大神webpack4系列教程序章Webpack4系列教程(一) 基础入门Webpack4系列教程(二) HTML相关Webpack4系列教程(三) CSS相...

何为webpack webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。webpack初体验命令：webpack 被打包目录 打包目录本地安装webpack，创建两个文件夹：src开发目录，dist生产目...

写在前面本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过webpack的写法和内置函数实现的。优势通过代码分割和代码懒加载，我们可以让用户在更短的时间内去看到他想要的页面目前webpack针对此项功能提供 2 种函数：require.ensure(): 引入但...