webpack4 入门第一天待更新...

最新推荐文章于 2022-04-11 09:13:47 发布

不要放弃

最新推荐文章于 2022-04-11 09:13:47 发布

阅读量215

点赞数

分类专栏： webpack 前端文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_44912410/article/details/107776383

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

webpack

2 篇文章 0 订阅

订阅专栏

文章目录

1. webpack默认配置（webpack版本4.44.1）

今天边看视频边做的关于webpack4的笔记，做下笔记希望自己能记住，也希望能给向我一样的初学者带来一些帮助。

1. npm init -y
2. npm install webpack webpack-cli -D
3. 创建src / index.js 文件
运行webpack打包,使用npx 会在 node_module里面查找webpack模块
3. npx webpack
打包完成后 会生成 dist/main.js 文件

在根目录创建webpack.config.js文件
默认配置 :

// webpack 是基于 nodejs的
// 要使用CommonJS规范导出一个对象

const path = require('path')

module.exports = {
  // webpack 执行入口
  entry: './src/index.js',
  // 输出
  output: {
    // 输出到哪里，必须是绝对路径
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },
  // 开发模式
  mode: 'development'
}

如果不在根目录创建webpack.config.js文件，默认是如下配置

默认入口模块
- ./src/index.js
默认输出
- 名称是main.js
- 路径是’./dist’
webpack默认支持多种模块类型：commonjs esmodule AMD
- esmodule 和 commonjs
  - import { } from ‘./’
  - const xxx = require(‘xxx’)
- webpack默认支持js模块和json模块

2. webpack核心配置概念

注意：

loader存在执行顺序：自右往左，自下往上

3. 图片 / 字体处理

npm install file-loader -D

./dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	<div id="root"></div>
	<script src="main.js"></script>
</body>
</html>

index.js

import pic from './asset/hz.jpg'
// 处理完成后 pic 即为 输出到路径的图片
// a4d6987a21c45234dc8a7e43044f33eb.jpg
console.log(pic)
var img = new Image()
img.src = pic
var root = document.querySelector('#root')
root.append(img)

webpack.config.js

module: {
    rules: [
      // 处理图片
      {
        test: /\.(png|jpg|gif)$/,
        use: [
        	{
              loader: 'file-loader',
              options: {
                //! 定义输出名字 具体查看官方文档 placeholders
                name: '[name]_[hash:8].[ext]',
                outputPath: 'images/',
              }
        	}
          ]
      },
      // 处理字体
      {
        test: /\.(woff2|woff|ttf|eot|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
              outputPath: 'font/',
            }
          }
        ]
      },
    ]
  }

此时页面就能显示出图片

4.css / less / …处理

npm install css-loader style-loader less less-loader -D

index.js

import("./asset/css/index.css")
import("./asset/css/a.css")
import("./asset/css/b.less")

webpack.config.js

      // 处理css
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            //! 将多个样式文件打包到一个 style 标签里面
            options: { injectType: 'singletonStyleTag' },
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      // 处理less
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
            //! 将多个样式文件打包到一个 style 标签里面
            options: { injectType: 'singletonStyleTag' },
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      },

5.postcss的使用

npm install postcss-loader autoprefixer -D

webpack.config.js，在css处理 / less处理中加入post-loader

{
   loader: 'postcss-loader'
}

新建postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({
      // 配置兼容市场份额大于1%的浏览器最近两个版本 
      overrideBrowserslist: ['last 2 versions', '>1%']
    })
  ]
}

6.plugins

plugin可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念

html-webpack-plugin

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

扩展插件,在webpack构建流程中的特定时期注入逻辑来改变构建结果或做你想要做的事情，作用于整个构建过程

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
      title: 'my app',
      template: './src/index.html',
      filename: 'template.html'
    })
  ]

需要创建html文件作为模板 ./src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

clean-webpack-plugin

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

cleanWebpackPlugin

作用: 在每次进行构建的时候将dist删除重新构建新的dist文件

webpack.config.js

const {CleanWebpackPugin} = require('clean-webpack-plugin')
plugins:[
   new CleanWebpackPugin()
]

mini-css-extract-pugin

npm install --save-dev mini-css-extract-plugin

作用：将多个css样式文件提取成一个独立文件

webpack.config.js

const miniCssExtractPlugin = require('mini-css-extract-plugin')
module: {
    rules: [
    	{
          test: /\.less$/,
          use: [
            //! 将多个样式文件打包到一个 style 标签里面
            // {
            //   loader: 'style-loader',

            //   options: { injectType: 'singletonStyleTag' },
            // },
            //! 将样式文件提取成一个独立文件
            {
              loader: miniCssExtractPlugin.loader,
              options: {
              }
            },
            'css-loader',
            'postcss-loader',
            'less-loader'
          ]
		},
	]
},	
plugins:[
  new miniCssExtractPlugin({
      filename: '[name]_[chunkhash:8].css',
  })
]

不要放弃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4 入门第一天待更新...

1. webpack默认配置（webpack版本4.44.1）今天边看视频边做的关于webpack4的笔记，做下笔记希望自己能记住，也希望能给向我一样的初学者带来一些帮助。1. npm init -y2. npm install webpack webpack-cli -D3. 创建src / index.js 文件运行webpack打包,使用npx 会在 node_module里面查找webpack模块3. npx webpack打包完成后会生成 dist/main.js 文件
复制链接

扫一扫