webpack打包css image

webpack打包css image
18/100
发布文章
weixin_45441173
未选择任何文件
new

webpack

安装相对应的版本防止报错，

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。这样，我们就可以通过 require 或 import 来加载任何类型的模块或文件，比如 CSS、 图片。

先看当前的目录结构 和上个教程一样的 只是增加一个css文件


把css文件引入到main.js文件中

正文

1. 安装 style-loader 和 css-loader 依赖

**首先安装相关 Loader 插件：
css-loader 是 将 css 装载到 javascript
style-loader 是让 javascript 认识 css**。

官网的说法:

npm install --save-dev style-loader@0.23.1  css-loader@3.0.0

2.修改webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',//production development开发环境不压缩dist 
    entry: './src/main.js', 
    output: {
    //__dirname:根目录nodejs提供的  ./dist/根目录下创建dist文件
        path: path.join(__dirname, './dist/'),
        filename: 'bundle.js'
    },

    module: { // 模块      
        rules: [ // 规则   
            {
                test: /\.css$/, // 正则表达式，匹配 .css 文件资源        
                use: [  // 使用的 Loader ,注意顺序不能错  
                 //1.先识别import模块文件 返回css(css-loader) 
                 //2. 在将css添加到DOM(style-loader)
                // 但是这里的执行顺序是从后往前执行的所以此写法是正确的         
                    'style-loader',//js识别css
                    'css-loader'//将css转换为js
                ]
            }
        ]
    }
}

执行命令：

npm  run build

此时会出现一个dist文件夹

index.html引入进行运行即可

看不懂的看上节教程

https://blog.csdn.net/weixin_45441173/article/details/123134733

webpack
安装相对应的版本防止报错，
在这里插入图片描述

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。这样，我们就可以通过 require 或 import 来加载任何类型的模块或文件，比如 CSS、 图片。

先看当前的目录结构 和上个教程一样的 只是增加一个css文件
在这里插入图片描述
在这里插入图片描述
把css文件引入到main.js文件中
在这里插入图片描述

正文

1. 安装 style-loader 和 css-loader 依赖

首先安装相关 Loader 插件：
css-loader 是 将 css 装载到 javascript
style-loader 是让 javascript 认识 css。

官网的说法:
在这里插入图片描述

npm install --save-dev style-loader@0.23.1 css-loader@3.0.0
2.修改webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {

mode: 'development',//production development开发环境不压缩dist 
entry: './src/main.js', 
output: {
//__dirname:根目录nodejs提供的  ./dist/根目录下创建dist文件
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
},

module: { // 模块      
    rules: [ // 规则   
        {
            test: /\.css$/, // 正则表达式，匹配 .css 文件资源        
            use: [  // 使用的 Loader ,注意顺序不能错  
             //1.先识别import模块文件 返回css(css-loader) 
             //2. 在将css添加到DOM(style-loader)
            // 但是这里的执行顺序是从后往前执行的所以此写法是正确的         
                'style-loader',//js识别css
                'css-loader'//将css转换为js
            ]
        }
    ]
}

}
执行命令：

npm run build
此时会出现一个dist文件夹
在这里插入图片描述
index.html引入进行运行即可
在这里插入图片描述
看不懂的看上节教程

https://blog.csdn.net/weixin_45441173/article/details/123134733

Markdown 2213 字数 74 行数 当前行 1, 当前列 0HTML 1057 字数 44 段落