1,webpack.config.js 配置打包css样式
/* //webpack的配置文件 作用:指示webpack 干哪些活(当你运行webpack指令时,会加载里面的配置) 所有构建工具都是基于nodejs平台运行的——模块化默认采用commonjs. */ //resolve 用来拼接绝对路径的方法 const {resolve} =require('path') module.exports = { //webpack配置 entry: './src/index.js', //输出 output: { //输入文件名 filename: 'built.js', //输入路径 //__dirname nodejs的变量,代表当前文件的目录绝对路径 path:resolve(__dirname,'build'), }, //loader配置 module: { rules: [ //详细loader配置 { test: /.css$/, //使用哪些loader进行处理 use: [ //use数组中loader执行顺序:从右到左,从下到上依次执行 //创建一个style标签 将js中的样式资源插入进去,添加到head中生效 'style-loader', //将css文件变成commonjs 模块加载到js中,里面的内容是样式字符串 'css-loader', ] } ] }, plugins: [ //详情Plugins配置 ], //模式 mode: 'development',//开发模式 //mode:'production',//生产模式 代码进行压缩 }
2,样式图片,页面图片
{ //问题:处理不了html中Img图片 //处理图片 test: /.(jp[e]?g|png|gif)$/, //使用一个loader loader: 'url-loader', options: { //图片大小小于8kb ,就会被base64处理 //优点:减少请求数量(减轻服务器压力) //缺点:图片体积会更大 limit: 8 * 1024, //问题 :因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs //解析时会出问题:【object Module】 //解决:关闭url-loader的Es6模块化,使用commonjs解析 esModule: false, //[hash:10]取图片的hash的前10位 name:'[hash:10].[ext]' } }, { test: /.html$/, //处理html文件的img图片 (负责引入img,从而能被url-loader进行处理) loader: 'html-loader', options: { esModule:false } }