webpack使用教程(三)常见资源解析

这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

资源解析es6

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env

使用 babel-loader

babel的配置文件是: .babel

module: {
  rules: [
    {
      test: /.txt$/, // test指向匹配规则
      use: 'raw-loader' // use指定使用的loader名称
    },
    {
      test: /.js$/,
      use: 'babel-loader'
    }
  ]
},

资源解析: 增加es6的babel preset 配置

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/proposal-class-properties"
    ]
}

资源解析css

css-loader 用于加载.css文件，并且切换成commonjs对象

style-loader 将样式通过 标签插入到head中

npm install style-loader css-loader -D

module:{ //模块
        rules:[ // 规则 css-loader接续 @import这种语法
            // stype-loader 他是把css插入到head的标签中
            // loader的特点  希望单一
            // loader的用法字符串只用一个loader
            // 多个loader需要【】
            // loader的顺序 默认是从右向左执行 从下倒上
            // loader还可以写成对象的方式
            {
                test:/.css$/,
                use:[{
                    loader:'style-loader',
                    options:{
                        insertAt:'top',// 插入到顶部
                    }
                }, 
                 'css-loader'
                ]
            }

        ]
    }

解析less

yarn add less-loader -D

{
  // 可以处理less文件
  test: /.less$/,
    use: [{
      loader: 'style-loader',
      options: {
        insertAt: 'top', // 插入到顶部
      }
    },
    'css-loader', // @import 解析路径
    'less-loader' // 把less->css
    ]
},

转化为link

因为都转化为style样式的话，css多的话，会很乱，所以会转化为link标签

yarn add mini-css-extract-plugin  -D

let MiniCssExtractPlugin = require['mini-css-extract-plugin']

plugins:[ //数组放着所有的webpack插件
        new MiniCssExtractPlugin({
            filename: "main.css", //模板名称
        })
    ],

 module:{ //模块
        rules:
            {
            // 可以处理less文件
                test:/.css$/,
                use:[
                MiniCssExtractPlugin.loader,
                 'css-loader'
                ]
            },
            {
                // 可以处理less文件
                test: /.less$/,
                use: [
                     MiniCssExtractPlugin.loader,
                    'css-loader', // @import 解析路径
                    'less-loader' // 把less->css
                ]
            },

        ]
    }

css浏览器前缀

yarn add postcss-loader autoprefixer -D

新建与 webpack.config.js 同级的 postcss.config.js 文件

module.exports = {
    plugins:[
        require("autoprefixer")
    ]
}

let MiniCssExtractPlugin = require['mini-css-extract-plugin']

module:{ //模块
        rules:[ 
            {
            // 可以处理less文件
                test:/.css$/,
                use:[
                MiniCssExtractPlugin.loader,
                 'css-loader',
                 'postcss-loader'
                ]
            },
            {
                // 可以处理less文件
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // @import 解析路径
                    'postcss-loader'
                    'less-loader',
                ]
            },

        ]
    }

css打包

yarn add optimize-css-assets-webpack-plugin -D

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');


optimization: {
   minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],//优化项目
}

资源解析图片

file-loader 用户处理文件

module: {
  rules: [
    {
      test: /.(png|svg|jpg|gif)$/, // test指向匹配规则
      use: [{
      	loader:'url-loader',
        options:{
        	limit:10240 //10k的大小，就直接做一个base64
        }
      }]
    }
  ]
},

资源解析vue

vue-loader

vue-template-compiler

vue

cnpm i vue-loader vue-template-compiler vue

配置文件

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module: {
  rules: [
   {
     test: /.vue$/,
     use: 'vue-loader'
   },
  ]
},
plugins: [
  new VueLoaderPlugin(),
]

引入模块

index.js 文件中

import Vue from 'vue';
import App from './app.vue';

const root = document.createElement('div');
document.body.appendChild(root);

new Vue({
    render: (h) => h(App)
}).$mount(root);

创建vue

新建一个app.vue

<template>
  <div id="test">
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Welcome",
    };
  },
};
</script>
<style scoped>
#test {
  color: red;
}
</style>