2020-07-27 webpack学习

1.前端工程化
将前端的开发流程规范化、标准化、包括开发流程、技术选型、代码规范、构建发布等，用于提升前端工程师的开发效率和代码质量
2.使用yarn
2.1安装yarn

  使用npm 安装yarn  npm install -g yarn

2.2 yarn淘宝源的安装

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g  

3.安装webpack 和webpack-cli
使用npm 安装
npm install webpack-cli -D
使用yarn安装
yarn add webpack webpack-cli -D
4.webpack的作用
如果一个界面上有多个js文件，那么就会有非常多的http请求发往服务器，就会消耗服务器的资源，对前端的性能也不好。有了webpack之后，把所有的请求打包到一个请求上去，再对js进行压缩，优化了性能。
5.webpack的使用
5.1webpack配置入口和出口

1.引入path
const path = require('path');
2.module.exports = {
      entry: './index.js',
      output: {
          filename: './index.js'，      //定义输出文件的路径
          path: path.join(_dirname,'./dist')    //拼接路径
       }
    }
3.重启webpack

5.2 解析配置loaders
webpack不仅仅是可以打包编译js文件，也可以将css等样式进行打包编译。
css样式文件的打包过程

1.安装css loader
yarn add css-loader style-loader
2.编写css样式文件 index.css
3.在配置文件webpack.config.js中需要配置loaders来进行加载css文件