Webpack
文章平均质量分 78
啊啊怪
这个作者很懒,什么都没留下…
展开
-
Webpack笔记(三):CSS、HTML、JS相关处理
当你每次修改了文件之后,就需要重新再打包一次,这样重复的操作显得很冗余,于是,就有了下边的devServer(开发服务器) devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器) 配置如下 module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: {原创 2021-01-28 23:38:31 · 131 阅读 · 1 评论 -
Webpack笔记(四):eslint
1、js语法检查eslint eslint是撰写JS的一个规范,它会检查你的js代码有没有格式错误或者语法错误,使你的js代码更加规范化 eslint的使用需要eslint-loader和一个eslint的库 推荐使用爱彼迎的代码检查风格 下载一些必要的东西 npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D 下载完之后,我们需要在package.json中新增一个"eslintConfig"对象,配置原创 2021-01-28 23:15:48 · 149 阅读 · 0 评论 -
Webpack笔记(二):打包资源
1、打包样式资源 因为样式并不能被webpack识别,所以我们回顾上一篇的内容,要想识别CSS,就要使用Loader,要想使用Loader,首先,我们需要先定义一个webpack.config.js的文件 webpack.config.js 是webpack的配置文件 作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置) 然后,webpack默认采用commonJS模块化方式,基本配置如下 //resolve是用来拼接绝对路径的方法 const { resolve } =原创 2021-01-27 13:28:52 · 99 阅读 · 0 评论 -
Webpack笔记(一):初体验
1、 Webpack是什么? Webpack是一个前端资源加载/打包工具,简单来说,就是将一些浏览器不认识的语法转换成浏览器能识别的语法 比如说,将ES6转换成平时常见的JS代码,将Less转换成css代码等等 1.1 Webpack的五个核心概念 1.1.1 Entry 入口(Entry)指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图 1.1.2 Output 输出(Output)指示Webpack打包后的资源bundles输出到哪里去,以及如何命名 1.1.3 Loader Lo原创 2021-01-07 16:40:02 · 209 阅读 · 0 评论