webpack 之loader

标签：添加   babel   加载   es2015   run   入口   res   rip   base        webpack的作用： 是 用来处理我们写的js代码。并且会自动处理js之间相关的依赖。 但是，开发中我们不仅仅有基本的js代码处理，还需要加载css，图片，也包括一些高级的 将ES6转成ES5代码，将Typescript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成 js文件等等。这时候就需要给webpack拓展对应的loader loader使用过程： 步骤一：通过npm安装需要使用的loader npm install --save-dev css-loader npm install --save-dev style-loader npm install --save-dev url-loader npm install --save-dev file-loader // es6 => es5 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 步骤二：在webpack.config.js中的module关键字下进行配置 const path = require(‘path‘); // 导入path模块 ，由于依赖node，所以必须要有package.json，即创建项目 module.exports = { entry : ‘./src/index.js‘, // 入口 output : { path : path.resolve(__dirname,‘dist‘), // 这里必须用绝对路径 filename : ‘bundle.js‘, // 出口, publicPath: ‘dist/‘, // 配置url文件路径 }, module:{ rules:[ { test:/\.css$/, // css-loader只负责将css文件进行加载 // style-loader负责将样式添加到DOM中 // 使用多个loader时。是从右向左 use:[‘style-loader‘,‘css-loader‘,] }, { test:/\.(png|jpg|gif|jpeg)$/, use:[ { loader:‘url-loader‘, options:{ // 当加载的图片，小于limit时，会将图片编译成base64字符串形式 // 当加载的图片，大于limit时，需要使用file-loader模块进行加载 limit: 8196, name: ‘img/[name].[hash:8].[ext]‘ // 名称规则 }, } ] }, // babel配置(es6 => es5) { test:/\.js/, // exclude:排除 exclude:/(node_modules|bower_components)/, use:{ loader:‘babel-loader‘, options:{ presets:[‘es2015‘] } } } ] } } 步骤三：在入口js文件中引用css文件 // js文件依赖css文件 require(‘./css/normal.css‘) // css文件依赖资源文件 body { background: url(../img/zdj.jpg) } 这样一来，运行npm run bulid就能直接打包css、资源文件,es6 => es5了      webpack 之loader标签：添加   babel   加载   es2015   run   入口   res   rip   base   原文地址：https://www.cnblogs.com/cl94/p/12313432.html