-
一、添加图片 1、css中的背景图片。 （1）安装file-loader 终端目标文件输入：npm install file-loader --save-dev 2、模板文件layer.tpl直接引用图片。 （1）绝对路径：直接写绝对路径就行。 （2）相对路径： <img src="${require('../../assets/bg.jpg')}" 3、最根部的文件index.html引用图片。 （1）绝对路径：直接写绝对路径就行。 （2）相对路径：file-loader 二、图片打包后的输出地址： 1、 query:{ name:'assets/[name]-[hash:5].[ext]' } 2、安装url-loader url-loader和file-loader相似，但是url-loader可以指定limit参数。 （1）终端目标文件输入：npm install url-loader --save-dev url-loader可以处理文件或者图片，当文件/图片大小大于指定的limit,就会丢给filel-loader去处理，当小于设定的limit，就会转为base64编码，不再是一个url(不再是一个http请求)，图片会被打包进html,css,js （2）两种图片引用方式：①通过http请求load进来。浏览器会有缓存，比较适用于重复性较高的图片。②打包成base64。任何地方要用时，都会有base64编码存在那里，会造成代码的冗余，增加代码的体积。 三、压缩图片 1、安装image-webpack-loader 终端目标文件输入：npm install image-webpack-loader --save-dev 2、先压缩文件再传给url-loader判断。查看全部
-
--display-modules 显示打包的所有模块查看全部
-
--watch 可以设置监控文件是否发生改变，如有改变则实时更新。查看全部
-
打包css文件可以不用加入loader，而是通过命令行参数--module-bind查看全部
-
2.5.1官网最新文档总结： 1.安装方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev 2.所以后面的参数'由presets: ['latest']相对于的变成了presets: ['env'] 3.官方并没有废弃query 也没有指明options是新参数 实际测试两种方法都可以 生成结果也一模一样 4.loader: 'babel-loader'才能被识别 5.include和exclude需要相对路径，所以include:__dirname +'./src/' 加前缀__dirname查看全部
-
要使css生效，还需要加多一个loader,style-loader!查看全部
-
安装了loader后，打包css文件，还需要指定loader，css文件是css-loader!查看全部
-
Webpack 自身并不支持css文件的打包，必须加入loader！查看全部
-
2.5.1官网最新文档总结： 1.安装方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev 2.所以后面的参数'由presets: ['latest']相对于的变成了presets: ['env'] 3.官方并没有废弃query 也没有指明options是新参数 实际测试两种方法都可以 生成结果也一模一样 4.loader: 'babel-loader'才能被识别 5.include和exclude需要相对路径，所以include:__dirname +'./src/' 加前缀__dirname 时间: 1天前查看全部
-
uuuv那边查看全部
-
777查看全部
-
__webpack_require查看全部
-
一、less-loader 1、安装： 终端目标文件输入：npm i less-loader --save-dev 错误提示：npm WARN less-loader@4.0.3 requires a peer of less@^2.3.1 but none was installed. 说明less没有装 2、安装less 终端目标文件输入：npm i less --save-dev 二、less-loader 基本配置是 loader: ‘style-lander!css-loader!postcss-loader!less-loader’ 三、sass-loader 1、安装 终端目标文件输入：npm i sass-loader --save-dev 出现错误提示： npm WARN sass-loader@6.0.3 requires a peer of node-sass@^4.0.0 but none was installed. 说明需要安装node-sass，解决方法： 终端目标文件输入：npm i node-sass -g --save-dev查看全部
-
一、安装style-loader和css-loader 终端目标文件输入：npm i style-loader css-loader --save-dev 二、webpack可以将任何资源视为一个模块。 三、这里将css引用进来， 1、app.js:用的是es6的import语法 2、webpack.config.js: module的loaders 四、postcss-loader 对css进行浏览器兼容性考虑时，可以用到这个loader 1、安装postcss-loader 终端目标文件输入：npm install postcss-loader --save-dev 2、是一个后处理器。 3、可以加浏览器的前缀 （1）安装autoprefixer 终端目标文件输入：npm install autoprefixer --save-dev 4、loader处理方式是从右到左，即从数组的最后一项往前 5、webpack.config.js中， 视频中的配置现在的postcss已经不支持了，我的配置是 { test: /\.css$/, loaders: [ "style-loader", "css-loader?importLoaders=1", //这里是为了把css里的@import先执行第一个loader { loader: "postcss-loader”, options: { plugins: (loader)=>[ require('autoprefixer')({ broswers:['last 5 versions'] }) ] }, } ], }查看全部
举报
0/150
提交
取消