Webpack新手教程:创建项目、安装依赖与基础配置

1、创建文件夹

使用npm init在项目文件夹中打开终端创建package.json文件,并创建以下文件夹

在这里插入图片描述

在common.js和util.js中定义为模块并默认导出

//common.js文件
export default function(){
  console.log('common');
}
//util.js文件
export default function(){
  console.log('unit');
}

在app.js中引入这两个模块,并调用

//app.js
import common from "./components/common";
import util from "./components/util";

common()
util()

最后在index.html中引入app.js

<script src="./src/app.js"></script>

2、安装webpack

在终端中输入 npm i webpack webpack-cli -D 安装webpack 以及webpack-cli

npm i webpack webpack-cli -D

webpack-cli 则是 webpack 的执行依赖,能够命令式的执行 webpack。
在这里插入图片描述

3、配置式使用webpack

在根目录下新增一个webpack.config.js文件

在文件中设置

module.exports = {
  entry: './src/app.js', // 需要打包的文件
  mode: 'development' // 打包环境
}

使用 npx webpack --config ./webpack.config.js 执行

在这里插入图片描述

执行后打开控制台可以看见执行结果

在这里插入图片描述

可以在package.json文件中配置脚本,可以快捷执行启动
在这里插入图片描述

执行pnpm dev 即可

4、打包结果

会在根目录生成一个dist文件夹,文件里面有一个main.js文件,这里是默认行为,可以指定位置以及打包后的文件名

修改index.js中的引用路径

<script src="./dist/main.js"></script>

5、webpack的配置

5.1基础配置

entry:表示 webpack 的入口,指定打包的文件,可以一个或多个。

output:表示输出文件的路径和文件名。

mode:表示打包环境,可设置 production 或 development 值。

在webpack.config.js中配置 可以自定义文件夹的名字,以及打包后的文件名(修改后不要忘记修改index.js中的引用路径)

const path = require('path')

module.exports = {
  entry: './src/app.js', // 需要打包的文件
  output:{
    path:path.resolve(__dirname,'dist'), //指定打包后在根目录下生成文件夹的名字
    filename:'main.js',   //打包后的文件名
    clean:true  //每次打包时清空上一次的文件
  },
  mode: 'development' // 打包环境
}
5.2Loader

webpack 的 Loader 主要用于对模块的转换,也就是对文件的转化,如将 Less、Sass 处理成 CSS,将图片处理成 data URL 等。

5.2.1处理css文件

在src中创建css文件夹,创建index.css并添加样式,并在app.js中直接引入css文件

在这里插入图片描述

//app.js文件
import common from "./components/common";
import util from "./components/util";
import './css/index.css'

common()
util()

此时运行pnpm dev 会报错,因为webpack无法处理css文件,只能处理json或者js文件

需要借助 Loader 或者 Plugins,处理 CSS 需要用到 css-loader 和 style-loader,不管是 Loader 还是Plugins 都是 JS 模块,所以需要安装:

pnpm i css-loader style-loader -D

loader在配置中的格式

//webpack.config.js文件
const path = require('path')

module.exports = {
  entry: './src/app.js', // 需要打包的文件
  output:{
    path:path.resolve(__dirname,'dist'), //指定打包后在根目录下生成文件夹的名字
    filename:'main.js',   //打包后的文件名
    clean:true  //每次打包时清空上一次的文件
  },
  mode: 'development', // 打包环境
  module:{
    //
    rules:[
      {
        //正则表达式,匹配.css结尾的文件名
        test:/\.css$/,
        //执行的顺序是从后往前从下往上,先使用css-loader将css转换成js,在使用style-loader应用
        use:['style-loader','css-loader']
      }
    ]
  }
}

再次启动,发现css的样式成功加载到页面上

在这里插入图片描述

5.2.2配置less文件和sass文件

下载less-loader和sass-loader

pnpm i less less-loader sass sass-loader -D

处理webpack配置文件

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.s[ac]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ]
  }

再次运行发现less文件和sass文件的样式都渲染在页面上了

5.2.3处理图片

在项目中的 src 下新建 images 文件夹,并放入两张图片,在 index.css 中新增 CSS 代码,并在index.html 中新增 div:

index.css新增的内容

.box3{
  width: 300px;
  height: 300px;
  background-image: url(../images/1.jpg);
  background-size: cover;
}
.box4{
  width: 300px;
  height: 300px;
  background-image: url(../images/2.jpg);
  background-size: cover;
}

在webpack配置文件中添加loader

{
     test: /\.(png|jpe?g|gif|svg|webp)$/,
     type: 'asset',
     parser: {
       dataUrlCondition: {
         //设置图片的最大尺寸,如果超过200k则以图片的方式引入,如果小于200k以base64的形式使用
         maxSize: 200 * 1024
       }
     }
}

运行pnpm dev 发现图片成功渲染在页面上

5.2.4处理css兼容性

通过 loader,可以将一些较新的 CSS 语法能够在低版本浏览器中使用,而这个 loader 就是 postcss

loader,但这个 loader 还依赖 postcss 和 postcss-preset-env,所以需要安装三个模块:

pnpm i postcss-loader postcss postcss-preset-env -D

webpack.config.js文件修改配置

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['postcss-preset-env']
            }
          }
        }]
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['postcss-preset-env']
            }
          }
        }, 'less-loader'],
      },
      {
        test: /\.s[ac]ss$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['postcss-preset-env']
            }
          }
        }, 'sass-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 200 * 1024
          }
        },
        generator: {
          filename: 'static/images/[hash][ext][query]'
        }
      }
    ]

除了修改以上配置以外,在 package.json 中新增:“browserslist”: [“ie >= 7”]

{
  "name": "10.22homework",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npx webpack --config ./webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "css-loader": "^7.1.2",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "postcss": "^8.4.47",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.0.7",
    "sass": "^1.80.3",
    "sass-loader": "^16.0.2",
    "style-loader": "^4.0.0",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4"
  },
  "browserslist": ["ie >= 7"]
}

在 index.css 中新增 display: flex; 运行实现css自动跨游览器兼容性适配

在这里插入图片描述

5.2.5处理js兼容性

通过 loader ,还可以将 JS 语法在较低的浏览器版本中使用,主要就是通过 babel,同样需要安装三个模块,一个 loader,一个核心库,一个预设,分别就是 babel-loader、@babel/core、@babel/presetenv:

npm i babel-loader @babel/core @babel/preset-env -D

安装后,在 webpack.config.js 中新增 loader 配置如下:

{
    	//匹配所有的js代码
        test: /\.js$/,
        //排除node_module    
        exclude: /node_modules/,
        use: ['babel-loader']
}

配置后在opp.js中加入es6语法

function count(...arg) {
console.log(arg[0] + arg[1])
}
count(1,2)

这样配置还不行,@babel/preset-env 才是主要转换代码的东西,为了后面方便修改,在项目根目录新

建一个 babel.config.js 配置文件:

module.exports = {
presets: ['@babel/preset-env']
}

在这里插入图片描述

es6的语法被自动兼容了

5.3Plugin

此部分内容有:提取 CSS 为单独文件、自动引入 JS 和 CSS、压缩 CSS

webpack 的插件能够增强 webapck 的功能,本身 webpack 只是解析依赖从而打包,loader 使webpack 能够转化文件,而 plugins 则使 webpack 能够拥有压缩,提取等更大强大的功能。

webpack 的插件主要在 plugins 字段上,是个数组,也就是可以使用多个插件,每个插件在使用的时候都必须传入一个 new 实例。

5.3.1通过 MiniCssExtractPlugin 插件可以将 CSS 提取到单独的文件中。

安装插件

npm i mini-css-extract-plugin -D

然后修改 webpack 的配置:

在这里插入图片描述

在这里插入图片描述

5.3.2通过 HtmlWebpackPlugin 插件生成一个新的html并自动引入相应的资源

安装插件

npm i html-webpack-plugin -D

在这里插入图片描述

打包后,可看到在 dist 下有一个 index.html

同时帮你自动引入了相关的资源,这时就可以访问这个新的 index.html 来查看效果了。

5.3.3压缩css

使用 CssMinimizerWebpackPlugin 这个插件能够将 CSS 压缩为一行,减少文件体积。

安装插件

npm i css-minimizer-webpack-plugin -D

修改webpack配置

在这里插入图片描述

打包效果如下

在这里插入图片描述

5.3.4自动清空打包目录

安装插件

npm i clean-webpack-plugin -D

配置

在这里插入图片描述

5.4DevServer

devserver 可以在本地启动一个服务,使我们可以使用 http 协议去访问 index.html ,并且当修改代码

时,能够监听当前项目的文件变动从而实现自动打包,而不用每次修改后都要手动打包:

安装要安装 webpack-devserver 模块

npm i webpack-dev-server -D

在 webpack 配置中添加 devServe 字段,里边配置 host、port等。

在这里插入图片描述

同时,webpack 打包命令也需要添加一个 serve 参数才能调用 webpack-dev-server:

在这里插入图片描述

5.5小结

上面通过处理各种资源来介绍 webpack 的配置使用,但只介绍了其中一部分,更多的 loader,plugins

等使用方法还是得到官方文档查询。

只要理解 webpack 的 entry、output、loader、plugins、mode 就非常简单,其余的查询官方文档即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值