// webpack // 多入口 // 多出口（动态配置文件名称） // 模块解析（module） // 需要安置对应的措置惩罚惩罚模块 // css:npm install style-loader css-loader // module: { // rules: [ // // 当webpack遇到不认识的模块，需要对应的loader进行措置惩罚惩罚 // { // test: /\.css$/, // use: // // 两个loader的时候使用数组,loader有执行挨次，从后往前 // ["style-loader", "css-loader"] // }, // { // test:/\.css$/, // // 多个loader的写法和单个loader的写法差别，单个loader使用东西形式，多个loader直接使用数组形式 // use:{ // loader:"url-loader" // } // }, // { // test:/\.css$/, // use:{ // //filr-loader是专门措置惩罚惩罚静态资源模块的 // loader:"file-loader", // // loader是可以配置参数的 // options:{ // // 打包后的静态资源名称 // //差此外文件打包后的文件名称差别，所以不能使用固定的文件名称，所以要使用静态资源占位符 // // name:‘pic.png‘, // // [name]传进来的文件名称 // // [hash]当前打包版本的hash,[hash:6]可以保存指定位数hash // // [ext]当前打包的格局，，官网loader上边还有其他特定的占位符， // name:"[name]_[hash].[ext]", // // 输出路径，统一打点文件的存放位置 // outputPath:‘images/‘ // } // } // } // ] // } // 经常使用的措置惩罚惩罚的文件：css文件、less文件、scss文件、字体图标、图片 // webpack官网中的loader部分有官方保举的loader // url-loader可以取代file-loader有limit字段，能限制文件巨细，当文件的巨细小于设置的尺寸。会被转化成base64格局，大于limit才会以独立文件显示，可以针对图标进行设置，低于必然巨细的时候不以文件形式存在可以减少请求实现优化 // 措置惩罚惩罚less要使用less和less-loader（按webpack官网进行配置） // can i use 网站上边可以看兼容性的问题 // 样式自动添加前缀postcss-loader autoprefixer -D // 自动添加css前缀 // { // test:/\.less$/, // use:["style-loader","css-loader","less-loader",{ // loader:"postcss-loader", // options:{ // plugins:()=>{ // require("autoprefix") // } // } // }] // } // loder是webpack解析模块的，plugins是来扩展webpack的成果的 // 构建之前先删除dist文件夹，防备dist中遗留很多版本的文件 // 这类的成果是通过webpack的plugins插件扩展配置来实现的 // clean-webpack-plugin构建前清空dist目录 // html-webpack-plugin打包后自动创建html文件 // 法式： // 1、引入插件 // const {CleanWebpackPlugin} = require("clean-webpack-plugin") // 2、实例化插件 // plugins:[ // new CleanWebpackPlugin() // ] // 3、可以在实例化的时候传入东西参数来对插件做配置 // const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) // plugins:[ // new HtmlWebpackPlugin({ // 配置项参数参考文档：https://github.com/jantimon/html-webpack-plugin#configuration // html文件中要使用ejs语法的模板引擎 // 使用<%=htmlWebpackPlugin.options.title%>可以访谒到 // }) // ] // mini-css-extract-plugin可以是css生成一个独立的css文件，而不是直接在html中以style标签的形式插入,不能使用style-loader,而是使用MiniCssExtractPlugin,要规定输出的文件名称 // const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘) // plugins:[ // new MiniCssExtractPlugin() // ]