webpack对代码、字体、图片等静态资源的解析和压缩——解析css和scss文件

最新推荐文章于 2024-09-22 09:38:42 发布

原创

最新推荐文章于 2024-09-22 09:38:42 发布 · 529 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用webpack配置解析和压缩CSS及SCSS文件。基础配置包括安装必要的依赖，如webpack、webpack-cli等。解析CSS时，采用style-loader和css-loader，而解析SCSS则需node-sass和sass-loader。通过示例展示了引入CSS和SCSS文件的步骤，并解释了webpack如何处理静态资源。

欢迎邮件交流：15225129190@163.com（源码在这里）

基础配置

1，建立一个空文件夹，执行npm init，安装webpack、webpack-cli、webpack-clean-plugin(清理插件)、html-webpack-plugin(模板插件)、webpack-dev-server(本地服务插件)，在package.json的scripts里新增如下：

"build": "webpack",
"dev": "webpack-dev-server"

2，新建webpack.config.js，内容如下：

const path = require("path");
const WebpackCleanPlugin = require("webpack-clean-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry:"./src/index.js",
    output:{
        filename:"index.js",
        path:path.resolve(__dirname,"./web")
    },
    plugins:[
        new WebpackCleanPlugin(),
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:"index.html"
        })
    ]
}

3，新建src文件夹，src下新建index.js，根目录新建index.html，结束后目录大概是这样：