webpack大全---------(基础配置篇)----2.webpack实例一

最新推荐文章于 2023-05-09 08:35:24 发布

@听风者

最新推荐文章于 2023-05-09 08:35:24 发布

阅读量509

点赞数 1

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/u011723584/article/details/93754268

版权

Webpack 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

上一篇：webpack大全---------(基础配置篇)----1.webpack的组成与介绍

webpack实例一：webpack中loader和plugins、devServer、mode的综合使用。

第一步：安装、创建配置。

  yarn add webpack webpack-cli -D
  yarn add webpack-dev-server  -D   //安装热服务，后面会讲解。
  yarn add style-loader css-loader less-loader  -D //处理css less需要的loader
  yarn add html-webpack-plugin  -D  //打包生成html文件需要的第三方插件。

并且创建一个根目录下创建一个src目录，在里面创建几个文件：index.html、index.css、index.js、index.less、a.css并且在根目录下创建webpack.config.js配置文件：
pack.json文件中写入如下内容：

     "scripts": {
      "build": "webpack --config webpack.config.js",      //表示默认的情况下 npm run build则启动这个命令。
      "dev": "webpack-dev-server"         //启动热服务的时候 npm run dev
    },

ps：默认的情况下启动npx webpack，会去找webpack.config.js文件。
如果要传入其他配置文件进行启动的话，可以这么去实现(在npm中配置了)：
npm run build – -- config 配置文件.
或者 npx webpack --config 配置文件的名称

第二步：写入内容。

a.css

body{
    color: red;
}

index.css

 @import "./a.css"; /*引入外部css文件*/
  body{
      background-color: red;
  }

index.less

   body{
	  div{
	    border: 1px solid #dadade;
	  }
	}

index.js

   require('./index.css');
   require('./index.less');

index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{  /*优先级比less和css的高*/
       background-color: yellow;
    }
</style>
<body>
	<div id="div1">
	
	</div>
</body>
</html>

webpack.config.js

 let path = require('path');
 let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devServer: { //开启服务配置(需要安装webpack-dev-server)
        port:3000,
        progress:true,         //打包显示进度条
        contentBase:'./dist' , //作为静态服务的目录
        compress:true,         //压缩
    },

    mode: "production",  //还有一种production环境
    entry:'./src/index.js',
    output:{
        filename: "bundle.[hash:8].js",   //根据hash生成不同的打包后的文件，不会实现覆盖
        //加上__dirname表示在当前目录下产生一个dist目录
        path: path.resolve(__dirname,'dist'),
    },

    //当打包后的目录没有html的时候自动生成
    plugins: [ //数组放置着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',  //指定某个html模板
            filename: 'index.html',     //打包后的名字
            minify: {
                removeAttributeQuotes:true,  //移出逗号
                collapseWhitespace:true,   //压缩html文件(去掉空格)
            },
            hash:true   //增加哈希码
        })
    ],
    module: { //模块
        rules: [ //规则 css-loader 解析@import 这种语法
	            //style-loader 作用把css插入到head的标签中
	            //loader的特点 希望单一
	            //loader的用法 字符串只用一个loader
	            //多个loader需要 []
	            //loader的顺序 默认是从右到左 从下到上
	            //loader还可以写成对象的方式
            {
                test:/\.css$/,
                use:[
                    {
                        loader: "style-loader",
                        options:{
                            insertAt:'top'   //插入的位置，顶部位置（后面自己写样式在html页面的时候，优先级就比这个高）
                        }
                    },
                    'css-loader'
                ]
            },
            {  //可以处理less文件  sass stylus node-sass  sass-loader
                // stylus stylus-loader
                //此处需要安装less less-loader
                test:/\.less$/,
                use:[
                    {
                        loader: "style-loader",
                        options:{
                            insertAt:'top'
                        }
                    },
                    'css-loader', //@import 解析路径
                    'less-loader' //把less->css
                ]
            }
        ]
    }
};

第三部：执行并且分析打包后的结果。

   npx webpack

打包成功：
在这里插入图片描述

浏览器中启动：观看优先级：
在这里插入图片描述
背景为黄色：说明打包成功，并且内联的css标签的优先级高。

下一遍：webpack大全---------(基础配置篇)----2.webpack实例二

@听风者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack大全---------(基础配置篇)----2.webpack实例一

上一篇：webpack大全---------(基础配置篇)----1.webpack的组成与介绍webpack实例一：webpack中loader和plugins、devServer、mode的综合使用。第一步：安装、创建配置。 yarn add webpack webpack-cli -D yarn add webpack-dev-server -D //安装热服务，后面会讲解...
复制链接

扫一扫

专栏目录