-
package.json中加入打包参数,运行npm run webpack查看全部
-
另一种方式查看全部
-
静态引入某一通用脚本文件，减少http请求查看全部
-
一个index.html的模板生成三个页面 a b c,并且使用chunk参数指定每个页面需要的脚本文件查看全部
-
获取不同文件的方式，并将它们分别注入到不同位置查看全部
-
遍历的方式查看全部
-
一、添加图片 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判断。 3、一直是错误提示Cannot read property 'bypassOnDebug' of null， 搜了评论、问答，百度了都没有看到解决办法？？？查看全部
-
一、layer.html是模板文件 1、处理模板文件的做法：（1）webpack将模板文件当做一个字符串进行处理。（2）webpack将模板文件当成已经编译好的的模板的处理函数。 对js模板语法，模板引擎，模板的作用的认识和了解再来看这章会比较容易理解。 二、要支持html文件，安装html-loader 终端目标文件输入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安装ejs 终端目标文件输入：npm install ejs-loader --save-dev layer.js载入ejs模板时，返回的是一个function，这时的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一个已经编译过的函数 四、react——jsx vue——jsx查看全部
-
一、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会自己处理@import,就不用再加importLoaders 三、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 --save-dev 会有错误提示：npm WARN prefer global node-gyp@3.6.0 should be installed with -g 但是它会自动安装到全局？？？（不确定）查看全部
-
五、@import语法引入的其他模块，或css,这时引入的文件postcss-loader没有起作用，解决方法: 用新的rules,use等的用法，不用原来的loaders,loader module:{ rules:[ { test:/\.js$/, loader:'babel-loader', exclude:path.resolve(__dirname,'/node_modules/'),//已经引用过的，已经打包过的文件 include:path.resolve(__dirname,'/src/'), query:{ presets:['latest'] } }, { test:/\.css$/, use:[ { loader:'style-loader' }, { loader:'css-loader', options:{ importLoaders:1 } }, { loader:'postcss-loader' } ] } ] },查看全部
-
安装cssloader npm install css-loader style-loader --save-dev查看全部
-
cd 进入一个目录 mkdir webpack-test cd webpack-test npm init npm install webpack --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:[ require('autoprefixer')({ broswers:['last 5 versions'] }) ], 运行出现错误： - configuration has an unknown property 'postcss'. These properties are valid: 原因：视频是webpack1.0，而现在已经是webpack2.0了， 终端提示错误时也给出了解决方案： Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { postcss: ... } }) ] 是说webpack2.0支持上述这种方式查看全部
-
一、（改善）进一步加快解析速度： 1、path.resolve(__dirname,'app/src') node有个api：path，path有个方法：resolve（解析）。 __dirname：在运行环境下的变量，在当前环境的路径， 'app/src':相对路径 解析完了之后可以得到一个绝对路径 2、改善方法： （1）改善的代码：exclude:path.resolve(__dirname,'/node_modules/'), include:path.resolve(__dirname,'/src/') （2）这样进一步改善后时间是618ms （3）注意，如果是'node_modules'（视频中），而不是'/node_modules/'的话，也能运行。但是'/node_modules/'要更快，'/node_modules/')是618ms,而'node_modules'（视频中）花的时间是1254ms查看全部
-
一、babel 1、babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码 2、安装babel 终端目标文件夹输入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常运行，视频中的loader:'babel'不能正常运行。 4、babel的loader是一个非常耗时的转换。 改善之前的时间是8260ms 二、query: ['kwɪərɪ]查询 presets:[priː'sets] 三、安装plugin的latest 终端目标文件输入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的参数5个：test,exclude,include,loader,loaders （2）改善方法：exclude,include参数 例如：exclude:'./node_modules/',//node_modules是已经引用过的，已经打包过的文件，其实这里对速度没有影响，这是告诉你如果是不相关的文件，可以用exclude include:'./src/', 1）会报错：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）报错的解决方法： exclude:__dirname+'/node_modules/',//已经引用过的，已经打包过的文件 include:__dirname+'/src/', （3）这样初步改善后时间是1210ms 五、给loader指定参数presets 1、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟问号 3、配置文件中用query 4、项目根目录建立babelrc配置文件，配置文件中一个对象，对象中参数为presets. 5、config.js中指定babel，babel指定presets.查看全部
举报
0/150
提交
取消