随笔分类 - Webpack
摘要：启动时如何可以区分不同的配置呢？ 方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可；方式二：使用相同的一个入口配置文件，通过设置参数来区分它们； 入口文件解析 我们之前编写入口文件的规则是这样的：./src/index.js，但是如果我们的配置文件所在的位置变成了 confi
阅读全文
摘要：webpack能解析三种文件路径： 绝对路径 由于已经获得文件的绝对路径，因此不需要再做进一步解析。相对路径 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录； 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径
阅读全文
摘要：搭建本地服务器 目前我们开发的代码，为了运行需要有两个操作： 操作一：npm run build，编译相关的代码； 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成
阅读全文
摘要：Vue打包后不同版本解析 vue(.runtime).global(.prod).js： 通过浏览器中的 <script src=“...”> 直接使用； 我们之前通过CDN引入和下载的Vue版本就是这个版本； 会暴露一个全局的Vue来使用；vue(.runtime).esm-browser(.pr
阅读全文
摘要：Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；包括：语法转换、源代码转换等 babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用 #安装 npm install @
阅读全文
摘要：Loader是用于特定的模块类型进行转换； Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等； CleanWebpackPlugin 手动删除dist文件夹 #安装 npm install clean-webpack-plugin -D #配置 module.expor
阅读全文
摘要：加载Css css-loader #css-loader的安装 npm install css-loader -D #内联方式 import "css-loader!../css/style.css"; #配置方式 webpack.config.js module: { rules: [ { tes
阅读全文
摘要：安装webpack npm install webpack webpack-cli –g # 全局安装 npm install webpack webpack-cli –D # 局部安装 Webpack的默认打包 在目录下直接执行 webpack 命令，生成一个dist文件夹，里面存放一个main.
阅读全文
