webpack介绍以及基础搭建

wabpack是什么？

打包工具（静态资源打包工具）

webpack的特点

1.对js以来进行整合处理
2.可以编译sass，less等预编译样式
3.可以对js，html，图片进行压缩优化，比如减少空格和代码注释

webpack的核心

1.entry 入口文件
2.output 出口文件
3.pugin 插件
4.loader 转换器
5.dev-serve 服务器
6. mode 模式

webpack手动搭建步骤

1.全局安装 webpack 4.35.3版本的

2.使用npm init -y 初始化一个package.json

3.创建一个src，src下面创建一个index.html  

4. src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div
5. 
5.可以使用打包命令  webpack src/main.js --output src/bundle.js 手动配置出口文件和入口文件进行打包，但是这样很麻烦，所以我们可以在配置一下

6.创建一个webpack.config.js,在里面配置一下代码
   const path = require("path")
      module.exports = {
          entry:"./src/main.js",
          output:{
              filename:"bundle.js",
              path:path.resolve(__dirname,"dist")
          }
      }
 然后打包的时候只需要webpack命令即可
 
7.每次我们代码需要更新是都要webpack一下才行，这里我们可以配置一个
本地服务器来帮助我们自动同步代码
首先运行 cnpm i webpack-dev-server -D
然后再package.json里配置 "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot" 热启动 8888是端口号
最后 npm run dev 运行

8.如果发生报错可能是webpack 版本的问题
运行 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S即可

9.配置sass 运行以下代码
 cnpm i node-sass sass-loader style-loader css-loader -D 
 在webpack.config.js 配置 规则
    module: {
        rules: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
            {
              test: /\.scss$/,
              use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }

10.打包时自动生成 html 页面
 下载依赖 cnpm i html-webpack-plugin -D
  在webpack.config.js  配置
      // 插件
      plugins:[
          new htmlWebpackPlugin({
              filename:"index.html",
              template:path.join(__dirname,'index.html')
          })
      ],
在这里需要注意的是index.html要跟src同级