【前端】web前端快速构建项目所需的webpack插件

前言

这个笔记用于平时记录积累学习webpack和前端项目中遇到的可快速开发的插件和程序，如有补充，可在下面进行评论，楼主会补充进来。

style-loader|css-loader

module.exports={
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
}

用于处理css样式

less-loader

module.exports={
    module:{
        rules:[
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    },
}

用于解析less文件

html-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
    ],
  },
};

将 HTML 导出为字符串。当编译器需要时，将压缩 HTML 字符串。

参考 https://webpack.docschina.org/loaders/html-loader/

file-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader'
      },
    ],
  },
};

文件加载程序将文件上的导入/需要()解析到url中，并将文件释放到输出目录中。

参考 https://v4.webpack.js.org/loaders/file-loader/

url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

一种用来将文件转换为base64uri的网页包的加载程序。

参考 https://v4.webpack.js.org/loaders/url-loader/

html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    plugins:[new HtmlWebpackPlugin({
        template:''//使用的html模版文件
    })]
}

用于生成一个固定的index.html,帮你加载主入口js文件

mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {resolve} = require('path')
module.exports={
    entry:'index.js',//主入口文件
    output:{
        filename:'main.js',//输出文件
        path:resolve(__dirname,'build')
    }
    plugins:[new MiniCssExtractPlugin({
        filename:'css/main.css'//在build/css底下生成main.css
    })]
}

用于将打包的css抽离至另一个css样式文件中，而不是放在js中

webpack-dev-server

module.exports={
    devServer:{
        static: {
      		directory: path.join(__dirname, 'public'),//public/目录当中的所有内容并提供一个本地服务
    	},
        compress: true,//gzip压缩
        port: 9000,//端口号
        open:true//自动打开浏览器
    }
}

开发时可以自动编译修改的内容