经过前面的一系列操作，已经初步完成了一个webpack项目，但是这个只有html文件和js文件，啥都没有，看起来不正常，我们需要给这个页面添加css样式，图片，字体图标等 如何添加呢？通过loadercss 添加css，需要style-loader和css-loader两个安装
npm install style-loader css-loader --save-dev记住所有loader安装完成后，需要在webpack.config.js文件里面的module.rules数组里面声明，才能用效果，loader的解析是从右往左的记住所有loader声明都有两个参数，test和usetest是正则校验表达式，表示这个loader用来解析哪种文件类型use如果简单的话，也可以直接使用loader代替use，use是个数组，里面是解析这种类型文件所需要用到的loader，每个loader都是有个options对象参数，用来设置一些属性Tips在使用loader的时候，我们还可以用!来代替数组模式loader使用
// String模式 loader: 'style-loader' // Array模式 loader: ['style-loader', 'css-loader'] // !模式 loader: 'style-loader!css-loader'引用
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { sourceMap: true, } } ] } ] }上面这段代码的意思理解为解析.css后缀的文件，将内容解析成css，然后通过style内联的方式在生产的index.html文件里面使用，不过是需要将css单独解析出来 现在在src文件夹下创建一个styles文件夹，里面新建一个index.css文件，设置body的字体颜色为红色 然后我们在入口文件里面引入这个css，然后打包看看效果，直接在index.js文件里面通过import引入这个css文件 可以看到css已经其效果了，body里面的文字变成了红色 做到这里，css样式部分完成了三分之一，但是样式一般要兼容浏览器，这个一般都不会自己去添加前缀，只能通过插件去自动添加各浏览器的前缀，实现代码兼容，这个工具就是postcss-loader和autoprefixer安装
npm install postcss-loader autoprefixer --save-dev调用 这个调用其实就是在上面css的loaer基础上在加一个postcss-loader
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, } }, { loader: 'postcss-loader', options: { sourceMap: true, } } ], exclude: /node_modules/, // 限制node_module include: path.resolve(__dirname, 'src'), // 允许src里面的 } ] }按照上面这个样子写好后，并没有结束，这样是不会加前缀的，而且打包还会报错，说没有postcss config，所以我们还需要在根目录下面创建一个postcss.config.js文件postcss.config.js
//const autoprefixer = require('autoprefixer')，不需要 module.exports = { plugins: { 'autoprefixer': { browsers: 'last 2 version' } } }上面的browsers是兼容浏览器版本，如果没有好像只会添加-webkit-css没有browsers 看起来并没有给做前缀兼容处理有browsers 可以看见，添加了browsers之后，就给添加了前缀兼容 这个browsers可以不在这里添加，可以写在package.json文件里面
"browserslist": [ "defaults", "> 1%", "not ie <=8", "last 2 versions" ]其他格式写法 这个可以不用创建这个config文件，直接在声明的地方引入原文引入
{ loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('autoprefixer')({browsers: 'last 2 version'}) ] } }一般到这里，css样式处理基本完成了，但是日常开发大多数人都是用预处理器来编写css的，这个对于webpack而言，又是一种新的文件类型，所以我们安装loader来解析这种语言，因为我使用的是sass，所以这里只介绍sass的使用，至于less和stylus可以看另一篇文章，有较为详细的解说安装sass
npm install node-sass sass-loader --save-dev调用 调用依旧是在原来的基础上再加上一个sass-loader，并且修改一下test
{ test: /\.(sc|c)ss$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, } }, { loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('autoprefixer')({browsers: 'last 2 version'}) ] } }, 'sass-loader' ], exclude: /node_modules/, include: path.resolve(__dirname, 'src') }好了，css大概就到这里
我要给body添加一个背景图，但是直接添加背景图，发现报错，需要个loader来解析图片，这是可以用file-loader和url-loader安装
npm install file-loader url-loader --save-dev调用
{ test: /\.(jpg|jpeg|gif|png|svg)$/, use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name].[ext]', outputPath: "./images",//打包后图片文件输出路径 publicPath:'./images' } } ] }limit是文件大小限制，好像小于1024就是转换成base64，大于1024就直接用图片，这个可以自己随意设置name可以是个文件名字，也可以是文件路径字符串outputPath打包图片文件输出路径，相对于dist而言publicPath公共图片路径 但是经过上面的操作后，我们发现，背景图并没有出来，也就是css样式里面的路径有问题
处理HTML图片
npm install html-withimg-loader --save-dev调用
{ test: /.(htm|html)$/i, use:[ 'html-withimg-loader'] }字体图标跟图片用的是同一个loader，所以只需要设置test即可调用
{ test: /\.(woff|woff2|eot|svg|ttf|otf)/, use: [ { loader: 'url-loader', options: { name: 'font/[name].[ext]' } } ] }这个解析js需要调用babel-loader安装
npm install babel-loader @babel/core --save-devbabel-loader : 处理ES6或者React的loader@babel/core : babel运行的核心内容babel-preset-env: 根据代码自动选择版本（ES的版本有很多，env表示会自动选择版本）babel-polyfill : 用于处理新增的API调用
{ test: /\.(js|jsx)$/, use: [ { loader: 'babel-loader', } ], exclude: /node_modules/, include: path.resolve(__dirname, 'src'), }大佬参考文献
babel-plugin-transform-vue-jsxvue中使用jsxxml-loader解析xml文件csv-loader解析csv || tsv文件更多loader参考
转载于:https://www.cnblogs.com/zjh-study/p/10861385.html
相关资源：Solidity-以太坊区块链-Truffle-webpack-开发入门 (一) 环境配置