Webpack 打包 - 2.webpack 样式资源打包(CSS/LESS...)

1.文件结构

 

 2.安装 webpack、webpack-cli

$ npm init
$ npm i webpack@4.41.6  webpack-cli@3.3.11  -g   //(全局)
$ npm i webpack@4.41.6  webpack-cli@3.3.11  -D   //(开发环境)

安装 css-loader 、style-loader.(处理 CSS 文件)

$ npm i style-loader@1.1.3 css-loader@3.4.2 -D   //(开发环境)

安装 less less-loader.(处理 LESS文件)

// 安装 less   less-loader  
$ npm i less@3.11.1 -D
$ npm i less-loader@5.0.0 -D

 

3. 新建 src 文件夹:

　　src 文件夹下新建 index.css 文件

　　src 文件夹下新建 index.less 文件

　　src 文件夹下新建 index.js (webpack 入口文件)

3.1 新建 build 文件夹(用于存放打包后生成的 js 文件):

3.2 新建 webpack配置文件: webpack.config.js (处理打包文件的主要逻辑都在这个文件中实现)

4.编写代码:

index.css

body,html{
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: pink;
}

 

index.less

#title{
  color:#fff
}

 

indes.js

 import './index.css'
 import './index.less'

 

webpack.config.js

/*
    webpack.config.js  webpack的配置文件
        作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

        所有构建工具都是基于 nodejs平台运行的~ 模块化默认采用commonjs。
*/

// resolve 用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    // webpack 配置
    // 入口起点
    entry: './src/index.js',

    // 输出路径
    output: {
        // 输出文件名
        filename: 'built.js',
        // __dirname: nodejs 变量，代表当前目录的绝对路径
        path: resolve(__dirname, 'build')
    },

    // loader 配置
    module: {
        rules: [
            // 详细loader配置
            // 不同文件必须配置不同 loader 处理
            // 这里是处理 css 文件的配置
            {
                // 配置哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序：从右到左，从下到上 依次执行
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
            },

            {
                test:/\.less/,
                use:[
                    'style-loader',
                    'css-loader',
                    //将 less 文件编译成 css 文件
                    //需要下载 less-loader 和 less
                    'less-loader'
                ]
            }

        ]
    },

    // plugins 配置
    plugins: [],

    // 模式
    mode: 'development'//开发模式
    // mode:'production'//生产模式

}

 

5.打包

$ webpack

打包后在build文件夹下生成 built.js 文件

 

 6.在build 文件夹下新建 index.html 文件，并引入打包后生成的文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h5 id="title">HELLO</h5>
<script src="built.js"></script>
</body>
</html>

 

预览

 

 

end~

 

 

posted @ 2022-08-16 12:00  Evengod  阅读(70)  评论(0)  编辑  收藏  举报