webpack基本配置

标题 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