萝卜不带泥

大家好！我是萝卜，Webpack 中一切皆模块，我们可以将CSS作为模块引入到代码中，这时候就需要添加 Webpack 的loader 来处理 CSS 了。 这时候 CSS 会被转成字符串， JS 就可以直接使用。 有了 css-loader 可以识别 CSS 语法了，下面就需…

大家好！我是萝卜，今天跟大家分享官方提供开发工具 webpack dev server 的使用。 webpack-dev-server是一个基于 Express 的本地开发服务器。它使用 webpack-dev-middleware 中间件来为通过 Webpack 打包生成的资…

大家好！我是萝卜不带泥，在 webpack 中编写 JavaScript 代码，可以使用最新的 ES 语法，而最终打包的时候，webpack 会借助 Babel 将 ES6+语法转换成在目标浏览器可执行 ES5 语法。所以 Babel 是一个重要的知识点需要掌握。 Babel …

大家好！我是萝卜，上篇介绍了与 entry 和 output 相关的配置，这一篇将介绍 Webpack 其他重要配置。 Webpack 进行构建的时候会从入口文件（entry）开始遍历寻找各个模块的依赖，resolve 配置是帮助 Webpack 查找依赖模块的，通过 reso…

大家好！我是萝卜不带泥，这一章跟大家介绍 webpack 4 常见的配置。 webpack 是可配置的模块打包工具，可以通过修改 webpack.config.js 的配置文件对 webpack 进行配置，webpack 的配置文件遵循 Nodejs 的 CommonJS 模块…

新建src目录，放置源码。 准备好以上内容后，我们在 webpack 目录下执行 npx webpack 命令，执行后，我们查看webpack目录下会生成一个dist目录，进入dist目录后会看到main.js文件，这个文件就是webpack打包压缩后的文件。 到此我们可以发现…

各位好！我是萝卜不带泥，这是我webpack系列文章的第二篇，上一篇介绍了为什么要使用webpack，这一篇主要讲解webpack的环境搭建，包括：npm node webpack 的安装，已经准备好的环境的同学可以略过，直接看我的下一篇文章了。 首先进入nodejs的官网，选…