Always-Learning

externals为什么需要externals?有时候我们不希望将某些包进行打包，而是通过CDN链接进行引入，此时我们就可以用到externals。使用externals的步骤再webpack.config.js中添加配置项指定要忽略打包的内容 externals: { jquery: 'jQuery' }在静态文件中通过CDN引入<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"

一、entry入口个数和输出个数的关系字符串形式当只有一个入口的时候，打包形成一个chunk，输出一个bundle。entry: './src/index.js',数组形式当以数组的形式引入文件的时候，也只是形成一个chunk,输出一个bundle。(这种方式可以在HMR功能中，让html的热更新生效)entry: ['./src/index.js','./src/add.js'],对象形式多入口，有几个入口文件就行形成几个chuank，输出几个bundle文件。

一、什么是Webpack？webpack是用于现代JavaScript应用程序的静态模块打包工具。webpack会分析我们的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（例如Sass、TypeScript等）,并将其打包为合适的格式供浏览器使用。二、为什么需要Webpack?如今在开发前端项目时，为了简化开发的复杂程度，引入了模块化、TypeScript、less、sass等CSS预处理器实践方法，但是使用它们开发的文件需要进行额外的处理才能被浏览器识别，we

懒加载的实现方法通过动态import的方法来实现懒加载。（下面的函数，不点击按钮是不会加载test.js这个文件的）。console.log("index.js文件被加载了~");document.getElementById('btn').onclick = function() { // 懒加载 import(/* webpackChunkName: 'test' */'./test').then(({mul}) => { console.log(mul(4,5));

什么是tree shaking?我们可以将我们的项目比作一棵树，树上每一个用到的第三方模块或者函数都可以比作一个绿色的树叶，但是我们的项目中可能存在很多没有被用到的模块或者函数，这些就是需要我们摇晃掉的树叶，这个过程我们叫做tree shaking。如何开启tree shaking？开启tree shaking只需满足下面两个条件，即可自动开启。必须使用ES6模块化。开启production环境。如果想要把所有的代码都进行tree shaking还需要在package.json中进

source-map是什么?source-map是一种提供构建后代码到源代码的映射技术，可以根据这个映射来追踪源代码的错误。设置source-map的方法我们只需在webpack.config.js中添加一个配置项即可。devtool: "source-map"选择类型开发环境：eval-source-map生产环境：source-maponeOf是什么？有时候，我们在webpack配置中写了很多的loader，这也就意味着，一个文件要被多个loader过滤一遍，这在有些情

在文章开始之前，首先想让大家知道一个知识点，那就是loader的加载顺序问题，是从下到上开始进行加载的。定义nodejs的环境变量，决定使用browserslist的哪个环境process.env.NODE_ENV = 'production';复用loader首先定义好需要复用的loader。const commonCssLoader = [ MiniCssExtractPlugin.loader, 'css-loader', { // 还需要再package.js.

一、引入Eslint安装相关工具包npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-importloader配置的核心写法module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader', options: {

配置dev-server安装相关包npm i webpack-dev-server@3.10.3增加配置项 devServer: { contentBase: resolve(__dirname,'build'), compress: true, port: 3000, open: true }下面我们对配置项进行一一解读。contentBase：指定服务器的启动路径。compress：是否进行压缩。port：服务器的启动端口号。open:

安装指定版本的webpacknpm i webpack@4.41.6 webpack-cli@3.3.11 -D安装指定版本的loadernpm i css-loader@3.4.2 style-loader@1.1.3 -D配置Webpack使得JS能够处理CSS样式下面是配置文件webpack.config.js// 引入用于拼接绝对路径的方法const { resolve } = require('path');module.exports = { // 入口起点

Webpack是什么？Webpack是一种前端资源构建工具，一个静态模块打包器，在Webpack看来，前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle).举例引出构建工具在上面的例子中，很多文件中的语法浏览器并不能识别，需要将这些文件中的语法转换为浏览器能够识别的语法。因此构建工具应运而生了，通过构建工具可以将各种语法转换的工具进行汇总，我们只需关注这个构建工具如何使用即可，而不用分别去学习如何将less转为css,如何将js中的语

Webpack是什么？Webpack是一种前端资源构建工具，是一个静态模块打包器，从Webpack的角度看，前端的所有资源文件都会作为模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。浏览器有时候无法解析某些资源文件，通过Webpack可以将这些资源文件进行统一打包，例如下面的less文件...