从前面几节到现在,其实我们的项目结构是有问题的,因为我们直接把index.html文件放到了dist文件夹目录下.这肯定是不正确的,应该放到我们src目录下,然后打包到dist目录下,前面为了学习,才把index.html放到了dist目录下. 此节我们就来完成把开发环境中的html文件打包到我们的生产路径下. 1.打包HTML文件 在开始下面内容之前,我们先改造一下之前的项目结构,先把dist中的index.html文件剪切到src目录中,并去掉我们引入的js代码(webpack会自动为我们引…

1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-webpack-plugin'); 3.引入后进行安装   cnpm i html-webpack-plugin --save-dev 4.在webpack.config.js中进行插件配置 new htmlPlugin({ minify:{ removeAttributeQuotes:true }, h…

写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展.Less 可以运行在 Node 或浏览器端.Less知识学习 1.Less文件的打包处理 1.1 在src/index.html文件中新增一个标签,样式采用less编写. <div id="less_part">less</div> 1.…

实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心. 通过webpack中可实现的JS代码压缩是通过插件的方式实现的----uglifyjs-webpack-plugin(JS压缩插件,简称uglify). 注意:虽然uglifyjs是插件,但是webpack版本里默认已经集成,不需要再次安装. 1.使用uglify插件实现JS代码压缩 1.1 插件引入 首先需要在webpac…

1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包.node-sass和sass-loader,(也可以使用cnpm安装) 因为sass-loader依赖于node-sass,所以需要先安装node-sass 1.1 node-sass npm install --save-dev node-sass 1.2 sass-loader npm install --save-dev sass-loader 注意:在用npm安装时,这个loader很容易安装失败,最好使用cn…

1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loader --save-dev 2.在module中配置 { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" , { loader: "less-loader&q…

1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass-loader --save-dev 2.配置 { test: /\.scss/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }] } 3.新建一个sass文件,编写div 4…

常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</project.build.name> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> project.build.name:  用来定义war包名称  proje…

Vue插件配置和 后台交互 一.全局配置静态文件(csss, js..) 1.1 全局配置css文件 创建css文件 在main.js配置css文件 // 配置全局css样式 // 方式一 import '@/assets/css/global.css' 方式二(推荐使用) require('@/assets/css/global.css'); 1.2 全局配置js文件 创建js文件 在main.js配置js文件 // 配置全局js文件 // 导入 import settings from '@…

yml配置 1 # Mybatis-Plus 2 mybatis-plus: 3 # 配置mapper的扫描,找到所有的mapper.xml映射文件 4 mapper-locations: com.xxx.project.biz.*.mapper.*Mapper.xml,com.xxx.project.biz.*.*.mapper.*Mapper.xml 5 #实体扫描 6 typeAliasesPackage: com.xxx.project.biz.*.entity,com.xxx.proj…