-
limit把图片小于1024的转成base64
查看全部 -
纠正上节课的写法问题
查看全部 -
需要为vue这种类型的文件声明一个loader
查看全部 -
entry不要拼错了，entry用来设置入口文件路径
查看全部 -
调用方法在package文件中配置建立好的webpack指令需要这样写才能调用我们自己建立后的webpack文件
查看全部 -
output配置输出的路径filename是文件名path是输出的文件夹
查看全部 -
entry是入口的配置将刚刚的入口文件打包
查看全部 -
构建入口文件通过mount输出到html里
查看全部 -
拼接绝对路径dirname是根目录路径
查看全部 -
插件
查看全部 -
一、设置环境变量标识 现在是开发环境还是正式环境
涉及的包 cross-env
配置 cross-env NODE_ENV=production cross-env NODE_ENV=development
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
webpack.config.js中的配置
const isDve = process.env.NODE_ENV === 'development'
if(isDve) {
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
}
}
}
二、html-webpack-plugin 插件
webpack.config.js中的配置
const {VueLoaderPlugin} = require('vue-loader')
plugins: [
new HTMLPlugin()
]
三、判断环境、区分打包
const { webpack } = require('webpack')
查看全部 -
css 预处理器 styl
查看全部 -
vscode插件安装：
查看全部 -
一、webpack 打包优化：
1、网络优化： 减少Http请求、压缩静态资源文件、使用浏览器的长缓存使应用的流i量变得更小加载速度更快
二、
查看全部 -
包的配置查看全部 -
包的配置查看全部 -
相关包的配置查看全部 -
安装的项目包，
查看全部 -
其它的loader的配置查看全部 -
package.json里面项目的配置查看全部 -
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径查看全部 -
npm init
npm i webpack vue vue-loader
npm i css-loader vue-template-compiler
查看全部 -
package.json按照视频课程修改版本
并且
查看评论后一个一个自己尝试，得到可以运行的版本
{
"name": "vue-todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"cross-env": "^5.1.3",
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.6.2",
"vue": "^2.5.13",
"vue-loader": "^13.6.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.9.1"
},
"devDependencies": {
"webpack-dev-server": "^2.9.1"
}
}
查看全部 -
插件
查看全部
举报