Webpack入门教程

一、Webpack

1.什么是Webpack？

Webpack是一个模块打包器，它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。 ----Webpack中文文档

说白了，它最大的用处就是分析一个网页的各种依赖，并且自动化地将这些依赖打包在一起并且压缩，供网页使用。当然它的功能不止如此，比如依赖loader，它还可以将JavaScript ES6(很多老浏览器不一定支持)转换成支持更加多浏览器的老版本JavaScript。
总之，它在前端的模块化开发中占有重要的作用，如果想让自己的项目变得更加整洁，开发更加有效率，Webpack有必要一学。

2.使用Webpack的好处

webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

二、使用步骤

1.安装

npm install --save-dev webpack
npm install --save-dev webpack-cli

这两行命令会为你的项目安装webpack和webpack-cli包，前者是webpack的核心库，后者是分离出来的webpack命令行功能，我们需要使用webpack-cli来进行项目的打包等操作。
注意webpack是基于node安装所以需要先安装node

2.初始化

npm init -y

当npm初始化完成之后，项目下会自动生成一个package.json文件。

3.创建文件夹

创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id
root名字，让引入bundle.js，src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root

4.入口，出口文件配置

创建一个webpack.config.js ,并进行以下配置

 const path = require("path")
      module.exports = {
          entry:"./src/main.js",
          output:{
              filename:"bundle.js",
              path:path.resolve(__dirname,"dist")
          }
      }

5.打包

运行webpack命令就可以进行打包

三、插件配置

1.scss 编译

下载依赖

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']
            }
        ]
    }

2.建立本地服务器

下载依赖

cnpm i webpack-dev-server -D

在package.json配置

"dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"

运行

npm run dev

需要注意的是可能以为下载的webpack版本过高报错，这时就需要进行降版本了
指定版本命令

cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S

3.html-webpack-plugin

在进行打包时只有指定的js文件会进行打包，如果需要让html也加入就需要额外的配置了
下载依赖

cnpm i html-webpack-plugin -D

在webpack.config.js 配置

 const htmlWebpackPlugin = require("html-webpack-plugin")
// 插件
      plugins:[
          new htmlWebpackPlugin({
              filename:"index.html",
              template:path.join(__dirname,'index.html')
          })
      ],

配置完之后 运行即可, index.html 模板拿到和src同级
注意使用的webpack的版本不能过高

总结

以上笔者只是简单的介绍了一下，如果对webpack感兴趣可用去官网进行学习webpack中文文档