webpack - 前端自动化工具(打包工具)

webpack官网: webpack webpack 中文网

使用步聚:

  1. 项目初始化 

npm init -y

    2.安装项目依赖

npm install --save-dev webpack webpack-cli

    3.项目根目录下创建一个 webpack.config.js 文件,就是一个webpack的配置文件

  • mode 模式 (开发,生产)

  • entry 入口 js 文件

  • output 出口

  • module 模块

  • plugins 插件

    4.开始打包

    三种方式:

./node_modules/.bin/webpack
npx webpack (npm 5.x 之后支持的一个命令)
配置 package.json 的 npm 脚本

webpack 默认的情况下只支持 js 的打包。如果需要用 webpack 的方式来使用 css , img 等文件,那么需要使用相对应的 loader (转换器,加载器)去做一下处理

一.css文件

1.安装对应文件类型的转换器.

npm install --save-dev css-loader style-loader

2.在 webpack 配置文件中, 对此类型的文件使用上面的转换器

module: {
    rules: [
    test: /\.css$/,    //匹配以 .css结尾的文件
    use: [
    //转换器的使用, 是有顺序的.这块使用的是倒序.
    'style-loader',    //是将 css 文件写入到页面的 style 标签里面去
    'css-loader'    //将普通的 css 文件转换成 webpack 所能识别的模块文件.
    ]
    ]
}

二.scss文件

  1. 除了安装 css-loader style-loader 之外.还需要安装 sass-loader node-sass

npm install --save-dev sass-loader node-sass

    2.在 webpack 配置文件中, 对此类型的文件使用上面的转换器.

{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}

三.less 文件

  1. 除了安装 css-loader style-loader 之外.还需要安装  less-loader less

npm install --save-dev less-loader less

    2.在 webpack 配置文件中, 对此类型的文件使用上面的转换器.

{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}

四. 图片 文件

  1. 安装 file-loader

npm install --save-dev file-loader

    2.在webpack 配置文件中,对此类型的文件使用上面的转换器

{
test: /\.[jpg|png|gif]$/,
use: 'file-loader'
}

插件

webpack 的插件,是针对于无法使用 loader 转换器处理的情况,来使用插件进行处理

  1. 安装对应的插件

  2. 在 配置文件中 的 plugins 选项中,调用插件

HtmlWebpackPlugin插件

能自动给我们创建一个 html 文件, 放到 dist (打包目录下) . 并且会自动引入入口js文件

  1. 安装插件

npm install --save-dev html-webpack-plugin

    2.配置

plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html')    //path模块 npm自带的
})
],

webpack-dev-server

启动一个 web 服务器,并且能够响应我们代码修改,当有代码修改的时候,会重新帮我们打包

使用步骤:

1.安装服务

npm install --save-dev webpack-dev-server

2.配置 webpack.config.js 

devServer: {
port: 9090    //配置端口号
}

3.开发时, 使用 webpack-dev-server 这个命令来启动项目即可

clean-webpack-plugin

每次打包,都会生成项目的静态资源,随着某些文件的增删,我们的 dist 目录下可能产生一些不再使用的静态资源,webpack并不会自动判断哪些是需要的资源,为了不让这些旧文件也部署到生产环境上占用空间,所以在 webpack 打包前最好能清理 dist 目录。

使用步骤:

1.安装服务

npm install clean-webpack-plugin --save-dev

2.配置 webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
    plugins: [
      new CleanWebpackPlugin(['dist']),
    ]
  };



版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

精彩评论
Top

分享: