专注前端技术，包括Web端、移动端、小程序、APP

在之前的webpack配置文件中，打包之后，css样式都是存在打包后的js文件的当中，且以字符串的形式存在。这样不利于我们对css兼容各浏览器的处理等操作。所以，我们必须将打包的css独立出来一个单独的文件。独立css文件配置需要用到一个插件：mini-css-extract-pluginnpm i mini-css-extract-plugin -D接着我们在webpack.config.js的最上方引入此插件：const MiniCssExtractPlugin = require('min

在前面讲过的webpack的简单使用中已经完成了webpack的基本配置，在你完成代码的编写之后，在命令行执行webpack命令打包即可。但是这种方式会比较麻烦，你在开发过程中需要多次进行调试，每次写完代码都需要进行打包就有些浪费时间了，所以我们可以进行配置热编译——devServer的配置。在你的webpack.config.js文件中，引入下面的配置，接着在控制台进行安装webpack-dev-server ：安装命令：npm i webpack-dev-server -D启动devServe

在你的项目根目录下，创建webpack.config.js文件，里面进行一些打包配置。如果你不是通过脚手架创建的某个应用，从头开始，你来写webpack的配置，大致步骤如下：第一步：npm init首先需要npm init生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm

Webpack 官方介绍：是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。举个栗子，比如你在你的html代码中，引入一段less样式，然后去在浏览器中看你的界面，你会发现，你写的样式并不会生效。这是因为，浏览器并不认识less文件，所以，此时我们必须借助工具将less文件编译成css代码，浏览器才能识别。再比如，在我们的页面中，