webpack基础讲解及简单搭建步骤

---

前言

简单的webpack搭建是一个前端的加分项，常用的vue框架就是以它为基础搭建的

---

一、webpack是什么？

webpack是静态资源打包工具，前端必备的东西！！

二、webpack的作用

• 将JS依赖进行打包整合(通俗一点，就是打包文件，一般项目上传的都是打包好的文件)
• 使一些预处理的sass，less可以在环境中进行编译(就是让你能在项目中使用sass，less)
• 可以对js、html、图片等进行压缩(项目优化)

三、核心

1. entry 入口文件 ---------// 好比main.js
2. output 出口文件 -------// 好比打包之后的文件夹(dist)
3. plugin 插件 -------------// 自动生成html文件等插件
4. loader 转换器 ---------// sass less 转换成我们想要的文件类型
5. dev-serve 服务器 ----// 使我们webpack在本地运行服务(能启动)
6. mode 模式 -------------// 可以切换开发环境 和 生成环境

四、使用步骤

①.基础搭建+打包

1. 先创建一个空文件夹用来搭建项目，并检测当前环境有没有webpack(webpack -v,没有就下呗！)
2. 在项目文件夹中，cmd打开终端，并输入

npm init -y//初始化一个package.json（此时生成一个package.json文件）

3. 项目中创建一个src文件夹，里面创建一个index.html ,给一个div并给一个id名，让引入bundle.js（ps：这里的bundle.js是打包后生成的文件，固定的哦！先写着，后面会用到）
   

4. src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的#hmw,如下：
   

5. 此时打包文件的话，在命令行(终端)输入

webpack src/main.js --output dist/bundle.js

此时，会自动生成dist文件夹，并包括了bundle.js文件。为了正式操作，你还要把src中的index.html复制到dist中，如图：
此时直接打开dist中index.html即可看到页面效果

6. 每次修改数据都要再次打包，输入那么长的命令，太麻烦，于是我们配置一下命令，简化一下打包指令

与src同级创建一个webpack.config.js (通常用来配置webpack),内容如下：

const path = require("path")//引入webpack里的配置
module.exports = {
    entry: "./src/main.js", //入口文件
    output: { //出口文件信息
        filename: "bundle.js", //文件名
        path: path.resolve(__dirname, "dist") //dist应该是文件夹名
    },
}

ps：此时，命令行输入webpack即可打包(和之前长的指令效果一样)

②.使其能在本地启动

完成上面操作后，要再本地启动项目则需要

1. 命令行输入(建立本地服务器)： cnpm i webpack-dev-server -D
2. 在package.json中配置（“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”），如下：

3.此时启动项目(npm run dev)即可，如果报错命令行输入：

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

再启动项目即可(ps:如果之前也有关于webpack-cli的报错，也可输入上方的命令解决，是由于webpack版本的问题)

再次ps：此时相当于有了一个热启动，操作dom时，页面会跟新，不用再次打包

③.编译sass

1. 命令行：cnpm i node-sass sass-loader style-loader css-loader -D
2. 在webpack.config.js 配置规则 (写在module.exports={这里！！！})

module: {
        rules: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
        {
          test: /.scss$/,
          use:['style-loader', 'css-loader', 'sass-loader']
        }
        ]
    }

3. 再在main.js里引入import './css/index.scss’即可使用scss啦！！

④.自动生成html页面

1. 先在命令行下载依赖 cnpm i html-webpack-plugin -D
2. 再在webpack.config.js中配置如下：

代码如下：

const htmlWebpackPlugin = require("html-webpack-plugin")

 // 插件 直接生成html
    plugins: [
        new htmlWebpackPlugin({
            filename: "index.html",
            template: path.join(__dirname, 'index.html')
        })
    ],

3. 最后把src中的index.html放到与src同级的地方，再次打包即可自动生成dist文件，包括bundle.js和index.html
   ps：练习时可以把之前的dist文件夹先删掉，再打包

---

总结

只要逻辑弄明白，webpack并不难哦！完成后的项目越来越像vue脚手架了。你每次操作的都是与src同级的index.html（而不是dist里的哦！），此时dist就只是一个打包文件，每次改变数据的时候还是要再次打包，打包之后的html是不可操作的