上海崇明林业建设有限公司网站,网站开发的风险与风险管理,展馆设计布展,手机房屋设计软件app前言#xff1a;#xff08;承接webpack的使用(上)#xff09;在实际开发过程中#xff0c;webpack 默认只能打包处理以 .js 后缀名结尾的模块#xff0c;其他非 js 后缀名结尾的模块#xff0c;webpack 默认处理不了#xff0c;需要调用 loader 加载器才可以正常打包承接webpack的使用(上)在实际开发过程中webpack 默认只能打包处理以 .js 后缀名结尾的模块其他非 js 后缀名结尾的模块webpack 默认处理不了需要调用 loader 加载器才可以正常打包否则会报错!通过loader(协助webpack进行打包)打包非js模块
loader
loader 加载器可以协助 webpack 打包处理特定的文件模块比如less-loader 可以打包处理 less 相关的文件sass-loader 可以打包处理 scss 相关的文件url-loader可以打包处理 css中与rurl路径相关的文件
1、打包处理css文件
1运行 npm i style-loader css-loader -D 命令安装处理 css 文件的 loader npm i style-loader css-loader -D2在 webpack.config.js 的 module - rules 数组中添加 loader 规则如下:
const pathrequire(path)
const HtmlWebpackPluginrequire(html-webpack-plugin)
const htmlePlguinnew HtmlWebpackPlugin({template:./src/index.html,filename: index.html
})
module.exports{// 编译模式mode:development, //development productionentry: path.join(__dirname,./src/index.js), //打包入口文件路径output:{path: path.join(__dirname,./dist), //输出文件的存放路径filename:bundle.js //输出文件的名称},devServer: {static:{directory:path.join(__dirname,/)}},module:{rules:[{test:/\.css$/,use:[style-loader,css-loader,postcss-loader]},]},plugins:[htmlePlguin]
}2、打包处理less文件
1运行 npm i less-loader less -D 命令
npm i less-loader less -D 2在 webpack.config.js 的 module - rules 数组中添加 loader 规则如下 module:{rules:[{test:/\.less$/,use:[style-loader,css-loader,less-loader]},]}3、打包处理scss文件
1运行 npm i sass-loader node-sass -D 命令 npm i sass-loader node-sass -D2在 webpack.config.js 的 module - rules 数组中添加 oader 规则如下 module:{rules:[{test:/\.scss$/,use:[style-loader,css-loader,sass-loader]},]}4、打包样式表中的图片和字体文件
1运行 npm i url-loader file-loader -D 命令 npm i url-loader file-loader -D2在 webpack.config.js 的 module - rules 数组中添加 Loader 规则如下 其中?之后的是 loader 的参数项limit 用来指定图片的大小单位是字节(byte) module:{rules:[{test:/\jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:url-loader?limit216508 }]}注意webpack5对url-loader已经废弃了要用assert
5、打包处理js 文件中的高级语法
对于js高级语法webpack打包回报错 1安装babel转换器相关的包: npm i babel-loader babel/core babel/runtime -D
npm i babel-loader babel/core babel/runtime -D2安装babel语法插件相关的包: npm i babel/preset-env babel/plugin-transform-runtime babel/plugin-proposal-class-properties -D
npm i babel/preset-env babel/plugin-transform-runtime babel/plugin-proposal-class-properties -D3在项目根目录中创建 babel 配置文件 babel.config.js 并初始化基本配置如下
module.exports{
presets: [babel/preset-env ],
plugins:[babel/plugin-transform-runtimebabel/plugin-proposal-
class-properties ]
}4在webpack.config.js 的 module - rules 数组中添加 Loader 规则如下
{ test: /\.jss/use: babel-lorder,exclude: /node modules/ }exclude 为排除项表示 babel-loader 不需要处理 node modules 中的 js 文件 注意exclude这一项必须有不然会报错 loader还有很多可查看webpack官方API中的loader内容
