使用webpack时,在main.js
文件中直接使用如下代码导入了style.css
文件,控制台中显示如下错误:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
import './css/style.css';
复制代码
原因是,webpack中默认只能打包.js
类型文件,无法打包其他类型文件。如果要打包非.js
类型文件,需要手动安装一些第三方loader加载器。
以下为各种文件类型打包实例:
处理css文件
方式一
- 在项目中用npm命令本地安装
style-loader
和css-loader
两个包
npm install style-loader css-loader --save--dev
复制代码
- 在引用style.css文件时,将
import './css/style.css';
代码改为以下代码:
import 'style-loader!css-loader!./style.css'")'; //先经过css-loader和style-loader处理
复制代码
- 重新用webpack打包
npm run dev
复制代码
这种方式的缺点是,当需要引入多个css文件,每次引入时都需要加style-loader!css-loader!
,比较麻烦,因此推荐使用以下方式:
方式二
- 在项目中用npm命令本地安装
style-loader
和css-loader
两个包
npm install style-loader css-loader --save--dev
复制代码
- 打开
webpack.config.js
文件,在里面新增一个配置节点module
,在module对象中,有一个rules
属性,它是一个数组,里面存放了所有第三方文件匹配和处理规则。如下代码匹配处理css文件:
module: { // 配置所有第三方loader 模块
rules: [ // 第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
]
}
复制代码
注意:此处'style-loader'
和'css-loader'
顺序不可替换。因为use中处理顺序为从后往前。先用css-loader对css文件进行处理,将处理后的结果交给style-loader作进一步处理,处理为webpack可以进行打包的数据。
- 引入style.css文件
import './css/style.css';
复制代码
- 重新用webpack打包
npm run dev
复制代码
以下所有其他类型文件的打包同方式二
处理less文件
- 在项目中用npm命令本地安装
style-loader
和css-loader
和less-loader
和less
三个包(若已有style-loader
和css-loader
则不必再安装这两个)
npm install style-loader css-loader less-loader less --save--dev
复制代码
- 打开
webpack.config.js
文件,在节点module
中rules
属性数组中,新增如下less的规则:
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // 处理 less 文件的 loader
复制代码
- 引入style.less文件
import './css/style.less';
复制代码
- 重新用webpack打包
npm run dev
复制代码
处理scss文件
- 在项目中用npm命令本地安装
style-loader
和css-loader
和sass-loader
和node-sass
四个包(若已有style-loader
和css-loader
则不必再安装这两个)
npm install style-loader css-loader sass-loader node-sass --save--dev
复制代码
- 打开
webpack.config.js
文件,在节点module
中rules
属性数组中,新增如下scss的规则:
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 处理 less 文件的 loader
复制代码
- 引入style.scss文件
import './css/style.lcss';
复制代码
- 重新用webpack打包
npm run dev
复制代码
处理url地址
例如,在css样式中使用background-image:url('...')
,webpack默认无法处理url,因此也需要手动安装第三方loader
- 在项目中用npm命令本地安装
url-loader
和file-loader
两个包
npm install url-loader file-loader --save--dev
复制代码
- 打开
webpack.config.js
文件,在节点module
中rules
属性数组中,新增如下的规则:
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
复制代码
- 重新用webpack打包
npm run dev
复制代码
处理ES6高级语法
webpack默认只能处理一部分的ES6语法,对于一些更高级的ES6语法,webpack无法处理,如下代码用webpack打包会报错。
class Person {
static info = {name:'zlx',age:18}
};
console.log(Person.info);
复制代码
webpack需要借助于第三方的 loader,这里使用Babel,将高级的ES6语法转为低级的语法之后,再将结果进行打包。
- 用npm命令安装如下包:
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
复制代码
- 打开
webpack.config.js
文件,在节点module
中rules
属性数组中,新增如下的规则:
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // exclude是防止node_modules中的js文件被打包
复制代码
- 在项目的 根目录中,新建一个 叫做 .babelrc 的Babel 配置文件,这个配置文件,属于JSON格式。里面写入如下代码:
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
复制代码
- 重新用webpack打包