随笔分类 - webpack
摘要：首先在根目录，新建一个webpack_config文件夹，然后新建entry_webpack.js文件，代码如下： 2.在webpack.config.js中引入 3.在入口文件修改代码： 4.在终端输入 npm run dev ，配置成功！ 前端必学内容：webpack（模块打包器） webpac
阅读全文
摘要：在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。 有时候你也会从后台读取到一个json的文件，这节课就学习如何在webpack环境中使用Json。 如果你会webpack1或者webpack2版本中，你是需要加载一个json-loader的loader进来的，
阅读全文
摘要：工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档）， 这些静态资源有可能是文档，也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源， 直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。 1.首先新建文件夹pu
阅读全文
摘要：1.抽离jquery，vue（多个第三方类库抽离） 修改入口文件(webpack.config.js中) 2.引入插件： 3.配置好后，我们输入webpack打包试一下 4.效果对比： jquery和vue已经被抽离出来了，同时入口entry.js的文件也从758kb变成了4kb 前端必学内容：we
阅读全文
摘要：随着项目大了，后端与前端联调，我们不需要每一次都去打包，这样特别麻烦，我们希望的场景是，每次按保存键，webpack自动为我们打包，这个工具就是watch！ 因为watch是webpack自带的插件，所以我们只需要配置就行了 1.在webpack.config.js中配置： 2.在终端中输入：web
阅读全文
摘要：下面说两种方法： 一、 1.引入jQuery，首先安装： 2.安装好后，在我们的entry.js中引入： 3.引入完成后，我们在entry.js中写入jquery的语法 进行测试： 4.使用 npm run server 效果如下： 二、 1.用plugin引入 如果你觉的上面的方法和webpack
阅读全文
摘要：package.json中，devDependencies和dependencies是不同的 devDependencies：开发依赖 dependencies：生产依赖（线上） 1.安装生产环境的依赖包： 2.配置生产环境和开发环境并行： 我们在以前的配置中设置了一个变量website，用于静态资
阅读全文
摘要：在配置devtool时，webpack给我们提供了四种选项。 source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度； cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提
阅读全文
摘要：1.Babel的安装与配置 Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个 你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel
阅读全文
摘要：使用PurifyCSS可以大大减少CSS冗余 1.安装 2.引入glob，因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。引入purifycss-webpack 3.配置 配置好后，我们可以在css文件里，故意写
阅读全文
摘要：为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 1.安装 2.在根目录新建一个postcss.config.js文件 这就是对postCSS一个简单的配置，引入了autoprefixer插件。让postCSS
阅读全文
摘要：1.安裝：因为sass-loader依赖于node-sass，所以需要先安装node-sass 2.配置 3.新建一个sass文件，编写div 4.在entry.js中引入css 5.输入webpack打包，最终效果： 6.sass文件分离 修改配置： 7.进行打包，最终效果： 前端必学内容：web
阅读全文
摘要：1.要使用less，首先使用npm安装less服务 还需要安装Less-loader用来打包使用。 2.在module中配置 3.在html中编写一个div，在css中新建一个less文件 4.引入到entry.js中 5.使用webpack进行打包 6.输入npm run server 查看效果
阅读全文
摘要：在webpack中是不喜欢你使用标签<img>来引入图片的，但是我们作前端的人特别热衷于这种写法， 国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题。 1.安装 2.在webpack.config.js配置 3.输入webpack进行打包
阅读全文
摘要：1.在终端安装extract-text-webpack-plugin 2.引入插件 3.配置 4.声明一个对象 然后引用这个对象 5.配置完成后，就可以使用webpack进行打包了 6. 前端必学内容：webpack（模块打包器） webpack3 学习内容，点击即可到达 (1).webpack快速
阅读全文
摘要：前端必学内容：webpack（模块打包器） webpack3 学习内容，点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpack3.X 快速上手一个Demo (3).webpack快速入门——配置文件：入口和出口，多入口、多出
阅读全文
摘要：1.首先在网上随便找一张图片，在src下新建images文件夹，将图片放在文件夹内 2.在index.html中写入代码：<div id="pic"></div>来放置图片 3.设置图片的css 4.编写完成后，进行打包，这时候会报错，先不要慌，这是因为缺少file-loader和url-loade
阅读全文
摘要：1.把dist中的index.html复制到src目录中，并去掉我们引入的js 2.在webpack.config.js中引入 3.引入后进行安装 cnpm i html-webpack-plugin --save-dev 4.在webpack.config.js中进行插件配置 5.在终端中输入we
阅读全文
摘要：1 .首先在webpack.config.js中引入 2.然后在plugins配置里 3.在终端输入webpack，你会发现JS代码已经被压缩了，如果你用的是VSCode，可以按住Alt+Z代码自动换行，查看效果 4.上图 前端必学内容：webpack（模块打包器） webpack3 学习内容，点击
阅读全文
摘要：1.在src下新建css文件，在css文件下新建index.css文件，输入以下代码 2.css建立好后，需要引入到入口文件，这里我们引入到entry.js中 3.在终端安装 4.安装好后，我们开始在webpack.config.js中配置 5.在终端输入 npm run server 6.在地址栏
阅读全文
浙公网安备 33010602011771号