一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已经存在的单个文件或整个目录复制到构建目录.命令:npm install copy-webpack-plugin --save-dev 3.在webpack.config.js进行配置,打包的时候把lib目录拷贝到构件目录,配置如下: //拷贝不进行打包的第三方库 new copyWebpackPlu…

本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpack4_multi_page_frame,进入文件夹,运行npm init -y命令初始化 3.安装webpack和webpack-cli 运行命令npm install webpack webpack-cli --save-dev 实现的功能: 1.普通前端项目多html页面使用webpack打包…

本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题      1.CSS打包      2.CSS处理浏览器兼容      3.SASS支持      4.CSS分离成单独的文件 二.创建目录结构 创建项目目录结构:参照上图创建即可 三.需要安装的包 style-loader:将 JS 字符串生成为 style 节点:       css-loader: 将 CSS 转化成 CommonJS 模块;  这两个合到一个命令:npm install --save-dev styl…

一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览器下载一次后会缓存下来,不会重复下载 二.未抽取公共代码的状况 基于之前代码,测试如下: 1.在assets/js文件夹下新建common.js,输入如下代码: export function printCommon(){ console.log("common"); } 2.在src/i…

一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要安装的包 babel-loader:输出浏览器兼容的js代码:命令: npm install --save-dev babel-loader @babel/core @babel/preset-env webpack-dev-server: 快速搭建本地运行环境:命令: npm install we…

一.解决什么问题      1.手写页面多入口,一个一个输入太麻烦,通过代码实现      2.手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二.多入口代码实现 //读取所有.js文件,动态设置多入口 function getEntry() { var entry = {}; //读取src目录下page下的所有.js文件 glob.sync('./src/pages/**/*.js') .forEach(function (name) { let start = name…

一.解决什么问题      1.图片路径替换.并输出到打包目录      2.输出目录清理 二.需要安装的包 file-loader:html.css中图片路径替换,图片输出到打包目录:命令:npm install --save-dev file-loader url-loader: 在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL,其依赖于file-loader:命令:npm install --save-dev url-loader clean-webpack-pl…

一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入img,引用图片<img src="../../assets/img/test.jpeg"> 2.npm run dev运行结果如下: 因为图片地址没有被替换为打包后的地址, 所以找不到图片   3.需要使用的包:html-withimg-loader,安装命令:npm inst…

自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpack搭建React开发环境,也是比较简单的,没有涉及到 CSS 抽取,第三方库打包等功能,这篇文章相对而言比较深入.但由于作者水平有限,难免存在谬误之处,欢迎大家指正. 还有没入门的童鞋可以参考我之前的文章: 浅入浅出webpack 基于Webpack搭建React开发环境 一.初始化项目 在命令行…

React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给大家,希望能让读者少踩一些坑! 本文看点 实际项目效果…