1、安装插件npm i file-loader --save-dev 2、项目目录 3、layer.less(图片位于less/css中 ).layer{ width: 600px; height: 200px; background-color: green; > ...
1、安装插件
npm i file-loader --save-dev
2、项目目录
3、layer.less(图片位于less/css中 )
.layer{ width: 600px; height: 200px; background-color: green; > div{ width: 400px; height: 200px; background:url(../../img/ais.jpg); } .flex{ display: flex; }}
4、webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'js/[name].js' }, module: { loaders: [{ test: /\.js$/, //以下目录不处理 exclude: /node_modules/, //只处理以下目录 include: /src/, loader: "babel-loader", //配置的目标运行环境(environment)自动启用需要的 babel 插件 query: { presets: ['latest'] } }, //css 处理这一块 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { //支持@important引入css importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效 require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } } ] }, //less 处理这一块 { test: /\.less$/, use: ['style-loader', { loader: 'css-loader', options: { //支持@important引入css importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效 require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } }, 'less-loader' ] }, //处理html模板 { test: /\.html$/, use: { loader: 'html-loader' } }, //处理图片 { test: /\.(png|jpg|gif|svg)$/i, loader: 'file-loader', } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html' }) ]}
5、执行命令
npm run webpack
6、效果
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:webpack 编译图片文件 file
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。