本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于webpack打包css流程的相关问题，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
1，要打包的文件，和引入的模板文件准备先准备好需要转换的文件，放在src文件夹中，有index.css样式文件和index.js。虽然说是把css也编译打包，也是先将其转换给index.js文件的,index中的文件内容import './index.css'
还有一个模板文件，也就是将打包编译好的文件引入到的index.html文件
import './index.css'
2，环境搭建npm init =》项目搭建环境的初始化初始化就会自动生成webpack.json和node_modules包安装的文件。
再在环境中安装包
1）基本的webpack包的安装npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
2）将模块化编译打包的文件自动引入模板文件，也就是html文件npm install --save-dev html-webpack-plugin@4.3.0
3）桥梁文件loder-css和webpack的桥梁识别css文件的安装包
npm install --save-dev css-loader@4.1.1
css样式以style的方式引入的
npm install --save-dev style-loader@1.2.1
css样式以link的方式引入
npm install --save-dev mini-css-extract-plugin@0.9.0
最后安装的包，可以从package.json中查看{  name: webpack-css,  version: 1.0.0,  description: ,  main: index.js,  scripts: {    webpack: webpack  },  author: ,  license: isc,  devdependencies: {    css-loader: ^4.1.1,    html-webpack-plugin: ^4.3.0,    mini-css-extract-plugin: ^0.9.0,    style-loader: ^1.2.1,    webpack: ^4.44.1,    webpack-cli: ^3.3.12  }}
3，对环境进行配置pluginshtmlwebpackpluginjs文件引入到html文件中需要手动，但是使用该插件，可以自动引入到html文件中
需要实例化，在plugins中进行配置
 const htmlwebpackplugin = require('html-webpack-plugin'); plugins: [    // 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹    new htmlwebpackplugin({      //在dist文件下成为打包生成的文件      filename: 'index.html',      //源文件，一起作为模板      template: './src/index.art',      //要引入的文件，在entry里面的js文件的名称      chunks: ['index']    }),    new htmlwebpackplugin({      filename: 'list.html',      template: './src/list.art',      chunks: ['list']    })  ]
环境进行配置 webpack.config.jsconst path = require('path');const htmlwebpackplugin = require('html-webpack-plugin');//css用link的方式引入const minicssextractplugin = require('mini-css-extract-plugin');module.exports = {  mode: 'development',  entry: './src/index.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].js'  },  module: {    rules: [      {        test: /\.css$/,        // loader: 'css-loader'        // use: ['style-loader', 'css-loader']        use: [minicssextractplugin.loader, 'css-loader']      }    ]  },  plugins: [     new htmlwebpackplugin({      template: './index.html',      filename: 'index.html'    }),    new minicssextractplugin({      filename: 'css/[name].css'    })  ]};
4，运行通过命令行 
npm run webpeck
【相关推荐：javascript视频教程、web前端】
以上就是webpack打包css详细流程解析的详细内容。