欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack安装及使用

程序员文章站 2022-07-12 20:59:25
...

webpack安装及使用


# 一、webpack是什么?

webpack就是一种打包工具(静态资源打包工具)

二、webpack的特点。

  1. js依赖进行整合处理 (打包整合)
  2. 一些预处理的sass,less可以在环境中进行编译 (转换)
  3. 可以对js、html、图片等进行压缩 (优化)

三、webpack的核心?

  • entry 入口文件 // 文件的核心js文件
  • output 出口文件 // 打包后的dist文件
  • plugin 插件 // 各类插件
  • loader 转换器 // 将文件转化为我们想要的文件类型
  • dev-serve 服务器 // 使我们webpack在本地运行 服务
  • mode 模式 // 可以切换开发环境 和 生成环境

四、webpack搭建步骤。

1.使用 webpack -v 确认当前环境有没有安装webpack,如果没有先安装webpack

npm i webpack -g

2.在想要成为 打包文件的文件夹中,使用 npm init -y 初始化一个package.json

3.创建一个src,src下面创建一个index.html ,里面加一个div div随便起一个 id root名字,让引入bundle.js

4.src 中创建一个 main.js 作为主要开发文件,在里面进行dom操作,操作html中的root div

5.打包
第一种方法:

//在命令行执行
webpack src/main.js --output src/bundle.js

第二种方法:
创建一个webpack.config.js

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

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

6.打包可以使用热启动这样就不必每次修改完就需要打包了
建立本地服务器: cnpm i webpack-dev-server -D
下载依赖:cnpm i node-sass sass-loader style-loader css-loader -D
在package.json中配置命令

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

7.解析 scss 文件
在webpack.config.js中配置:

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

8.引入jquery
下载 npm i jquery --save

import $ from 'jquery'
 $("#root").css({color:"red"})

9.自动生成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同级
配置完之后 再次打包运行即可