基于4.0以上的webpack打包html,css,js,img 所需要的步骤

最新推荐文章于 2024-05-15 05:23:46 发布

作泥

最新推荐文章于 2024-05-15 05:23:46 发布

阅读量1.2k

点赞数 3

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_37787674/article/details/100015169

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基于4.0以上的webpack打包html,css,js,img 所需要的步骤

webpack依赖node环境，这个不用说了吧
新建项目文件夹webpa，名字可以自己起，进入文件夹，执行命令npm init，执行完后会新增一个package.json文件
继续输入命令安装webpack和webpack依赖包，npm install --save-dev webpack
4.0以上版本的webpack需要多安装webpack-cli ，npm install –save-dev webpack-cli

安装打包html,css,js,img所需要的依赖包


npm install style-loader css-loader --save-dev      //打包css style

npm install optimize-css-assets-webpack-plugin  --save-dev  //压缩css，可要可不要，这里暂不讲解css的压缩配置，如有需要可自行百度

npm install –save-dev sass-loader  //打包scss//因为sass-loader依赖于node-sass，所以还要安装node-sass

npm install –save-dev node-sass

npm install  url-loader file-loader img-loader --save-dev    //url-loader file-loader用于打包css中的图片，img-loader用于图片压缩

npm install html-webpack-plugin --save-dev       //打包html文件

下面贴上webpack.config.js的配置信息



const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        bundle: './src/bundle.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[chunkhash].js'
    },
    module: {
        rules: [{
                test: /\.scss$/, // 正则表达式，表示.scss后缀的文件
                use: ['style-loader', 'css-loader', 'sass-loader'] // 针对scss文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/, //正则表达式匹配图片规则
                use: [{
                    loader: 'url-loader',
                    options: {
                        publicPath: './',
                        limit: 10000, //限制打包图片的大小：
                        //如果大于或等于10000Byte，则按照相应的文件名和路径打包图片；如果小于10000Byte，则将图片转成base64格式的字符串。
                        name: 'image/[name].[hash:8].[ext]', //css中的images图片将会打包在build/image下;
                    }
                }]
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //处理媒体文件
                loader: 'url-loader',
                options: {
                    publicPath: './',
                    limit: 10000,
                    name: 'media/[name].[hash:8].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,//处理字体文件
                loader: 'url-loader',
                options: {
                    publicPath: './',
                    limit: 10000,
                    name: 'fonts/[name].[hash:8].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Myindex',
            filename: 'index.html', // 输出的文件名
            minify: { //压缩HTML文件
                removeComments: true, //移除HTML中的注释
                collapseWhitespace: false //删除空白符与换行符
            }, // 移除注释
            template: 'src/index.html' // 我们原来的index.html路径，作为模板
        })
    ],

};

因为index.js依赖jQuery，这里给jQuery安装依赖包
npm install jquery --save-dev

index.js文件的内容为：

import scss from './css/main.scss';
import $ from 'jquery';

console.log('webpack测试内容')
$('.dom').on('click', function () {
    alert('hello webpack');
})

package.json内容

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" //可直接运行 npm run build 进行打包操作 相关的还有--watch 自动更新 --progress 显示打包进度  --display-modules 列出打包模块  --display-reasons 列出打包原因  --p 压缩混淆脚本等等
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "img-loader": "^3.0.1",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
}

src目录下的index.html文件的文件内容为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>

</head>

<body>
<!-- 我是注释，压缩后会去除 -->
    <div class="dom"><%= htmlWebpackPlugin.options.title %></div>
    <img src="<%= require('./images/index.jpg')%>" alt="picture" class="boelogoimg" style="width: 200px;">
</body>

</html>

完成以上操作后，执行 npm run build 进行打包操作项目输出以下文件，则证明我们配置成功，并打包成功

在这里插入图片描述

这里介绍有关webpack的基本学习网址：https://segmentfault.com/a/1190000012536871

作泥

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
基于4.0以上的webpack打包html,css,js,img 所需要的步骤

基于4.0以上的webpack打包html,css,js,img 所需要的步骤webpack依赖node环境，这个不用说了吧新建项目文件夹webpa，名字可以自己起，进入文件夹，执行命令npm init，执行完后会新增一个package.json文件继续输入命令安装webpack和webpack依赖包，npm install --save-dev webpack4.0以上版本的webpa...
复制链接

扫一扫