标题 webpack基本配置
1.网页中常见静态资源:js,css,inages,字体文件,模板文件
2,网页中引入静态资源多了以后有什么问题:加载速度慢,因为发起很多二次请求;要处理错综复杂的依赖关系
3.解决上述两个问题:合并,压缩,精灵图,图片Base64编码;requirejs或者webpack解决依赖关系
4.webpack是前端的一个项目构建工具,给予nodejs开发的前端工具
1.安装:cnpm i webpack@3.4 -g
2.自动打包编译 下载工具 `cnpm i webpack-dev-server (2.9.3版本) 相当于nodemon,里面内容变化自动运行 ,在package.json的test下加"dev":“webpack-dev-server”;运行npm run dev;删掉node_modules,npm i依靠依赖项重新下载;cnpm i webpack
3.改变端口号:
4.安装 html-webpack-plugin 配置
5.导入css样式表
6.处理less文件
7.处理图片路径
8.处理css中字体文件
9.安装babel,解决语法高级无法解析问题
webpack 4.3下安装babel指定版本: 把package.json拿过来用的时候,babel也要在命令行重新运行,否则无效
cnpm install -D babel-preset-env@1.6.1
cnpm install -D babel-loader@7.1.4
cnpm install -D babel-core@6.26.0
再打开webpack.config.js文件输入规则: exclude是不包括这个文件里的js