webpack
文章平均质量分 61
Conan_W
这个作者很懒,什么都没留下…
展开
-
babel-的认识和配置
Q1: babel.config.js 和.babelrc的区别 // babel 7.x 以上支持两种 - babelrc 只会影响本项目中的代码,相对文件的配置文件。 - babel.config.js会影响整个项目中的代码,包含node_modules中的代码,当前项目维度的配置文件,相当于一份全局的配置文件。如果项目决定使用这个配置文件,就一定会应用到所有的文件转换中。 babel : JS 的编译器。将ES6->ES5 缺点: 不能够翻译es6新的API. <script typ原创 2021-05-17 11:56:08 · 177 阅读 · 0 评论 -
webpack-plugins的理解
Plugin (插件) plugin 就是对某个现有的框架进行扩展,webpack中的插件就是对webpack现有的功能进行扩展,比如打包优化,文件压缩等。 Q1: plugin 和 loader的区别? loader主要转换某些类型的模块,相等于一个转换器 plugin插件是对webpack本身的扩展,是一个扩展器。 // 使用过程: // 版权名的插件 steps1: 通过npm安装需要的插件 steps2: 在webpack.config.js中配置插件 { plugins: [ n原创 2021-05-17 11:54:04 · 198 阅读 · 1 评论 -
webpack-loader的理解
loader 详情:Webpack的一个核心概念 对于webpack本身来说,不具备这些转化的能力。给webpack扩展对应的loader就可以。 loader 的使用过程 通过npm安装需要的loader //加载 CSS 文件并解析 import 的 CSS 文件,最终返回 CSS 代码 npm install --save-dev css-loader // 负责将样式添加在DOM上 npm install --save-dev style-loader //加载并编译 LESS 文件 npm i原创 2021-05-17 11:53:27 · 151 阅读 · 0 评论 -
webpack-打包工具的比较
打包工具的分类? 仅介绍 4 款主流的打包工具: grunt, gulpjs, webpack, Rollup, roadhog, create-react-app , parcel 以发布时间为顺序。 Grunt:最老牌的打包工具,它运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段,认知成本高,运用的时候需要明白各种插件的配置规则。 Gulp:用代码方式来写打包脚本,并且代码采用流式的写法,只抽象出了gu原创 2021-05-17 11:52:26 · 344 阅读 · 0 评论 -
webpack-核心概念
核心概念 module.exports = { mode: 'development', //development环境 production环境 // 入口文件 告诉的webpack 要打包的文件 entry: './src/index.js', // 入口文件 // 输出文件:告诉webpack 打包后文件放在哪里 output: { path: path.resolve(__dirname, 'dist'), // 打包文件后的具体路径原创 2021-05-17 11:51:30 · 65 阅读 · 0 评论 -
webpack-初识
官网 文档 打包工具的分类? 仅介绍 4 款主流的打包工具:grunt, gulp,webpack, rollup,以发布时间为顺序。 Grunt:最老牌的打包工具,它运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段,认知成本高,运用的时候需要明白各种插件的配置规则。 Gulp:用代码方式来写打包脚本,并且代码采用流式的写法,只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp..原创 2021-05-17 11:50:33 · 70 阅读 · 0 评论