使用Webpack创建和打包一个基础网页项目的详细入门教程步骤

在使用Webpack创建项目前先下载安装配置完Node.js。安装配置Node.js下载Node.js:https://nodejs.org/zh-cn/download设置安装路径:node.js修改或自定义设置npm全局包的安装路径命令npm config set prefix 设置缓存目录:node.js设置或更改npm下载包的默认缓存目录命令npm config set cache配置环境变量:node.js node...
Web前端开发 / / 14次阅读

WebPack中生成独立CSS文件的插件mini-css-extract-plugin

Webpack处理CSS的常规方法通常是使用 style-loader 和 css-loader 把 CSS 内联到 JS 文件里,然后通过 JS 注入到页面。如果想要常规的独立 CSS 文件,就需要使用插件来提取 CSS,在 Webpack 4 及以上版本中常用 mini-css-extract-plugin,把 webpack.config.js 中的 style-loader替换为 MiniCssExtractPlugin....
Web前端开发 / / 190次阅读

打包工具WebPack的配置文件webpack.config.js的基础配置参数

WebPack 是一个现代前端开发中广泛使用的模块打包工具(Module Bundler),主要用于将多个分散的 JavaScript 文件、CSS、图片等资源“打包”成浏览器可高效加载的静态资源文件(如 .js、.css、.png 等)。新手可以暂时通俗地理解为WebPack可以把多个文件(如js文件、css文件、图片文件等)合并成一个文件(如bundle.js),这样浏览器就只需要加载bundle.js这一个资源文件,不用分别...
Web前端开发 / / 154次阅读