css-loader/style-loader
打包css文件
1、在main.js中依赖css文件
import { num,answer } from "./src/js/1.js"; console.log(num); console.log(answer); ***require('./src/css/normal.css')
2、在集成终端下载:
npm install --save-dev css-loader和npm install style-loader --save-dev
3、在webpack.config.js 添加:
module.exports={ module: { rules: [{test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}]}} //css-loader负责css文件加载,style-loader负责将样式添加到DOM中,多个loader读取顺序从右向左
url-loader
webpack图片文件处理
css文件中有图片时:
body{background:url('../img/3.jpg')}
1、在main.js中依赖css文件
***require('./src/css/normal.css')
2、在集成终端下载:npm install --save-dev url-loader
3、在webpack.config.js 添加output和rules
output:{publicPath:'dist/' //大于limit时,更改图片路径,将原图片路径改为打包的图片(图片名为哈希值) module: { rules: [{ test: /\.(png|jpg|gif)$/, use: [ {loader: 'url-loader', options: { limit: 8192, //图片大小小于limit时,将图片编译成Basement4字符串格式;大于时,使用file-loder进行加载(终端下载),打包时图片也进行打包,并且页面显示图片为打包图片 name:'img/[name].[hash:8].[ext]'}}]}] //name截取原图片名字,并加上哈希值防止命名重复
babel-loader
ES6转ES5的babel工具
打包后的bundle.js为ES5
1、在集成终端下载:
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2、 在 webpack 配置对象webpack.config.js中,需要添加 babel-loader 到 module 的 loaders 列表中
module: { rules: [ {test: /\.js$/, //匹配js文件 exclude: /(node_modules|bower_components)/, //排除这些文件不进行转化 use: { loader: 'babel-loader', options: { presets: ['es2015']