When require is introduced, the webpack will automatically correspond to the loader. If it's just a static page, you can simply pull out the parts of the content that need to be compiled by the template engine. Moreover, the template engine's related syntax cannot conflict with vue's template syntax, which will result in errors in Vue template parsing after js template engine parsing Using the preprocessing template engine, the compilation function is executed in the loader to return the string, and there is no way to pass in the data to participate in the compilation.
#Vue pug template code
You can see here that options.data in the code above is only passed in when the webpack is configured, not officially downloaded. It will automatically infer the proper loaders to use based on the lang attribute of a language block and the rules in your webpack config. vue-loader allows you to use other webpack loaders to process a part of a Vue component. const pug = require('pug')Ĭonst template = pug.compile(source, options) In webpack, all pre-processors need to be applied with a corresponding loader. So to return the final string, just pass in the data and execute the function doT.template(source)(data).ĭirect use of dotjs-loader can not meet the above requirements, only modify the return format in the loader, specific reference pug-plain-loader, the logic is simple, passing in the template engine parameters, options corresponding to the options parameters in the webpack configuration, and finally returning the compiled string. One more special thing is that the loader corresponding to the template engine must return a string,įor example, if we use dotjs-loader to parse the dotjs template, we will get an error and look at it dotjs-loader, found return 'export default ' + doT.template(source) įinally, the result of the export is returned, and an anonymous function is returned after the doT.template(source) executes successfully. You need to manually configure the loader in, and the configuration rules are similar to introducing pug, so you can modify the relevant loader. Introduce dotjs or other template engines,
pugĬonst loaderUtils = require('loader-utils')Ĭonst, 3. Stay vue-loader/preprocessor.js Inside the file, // loader for pre-processing templates with e.g. V14 or lower consolidate To compile, so the supported template engine, from consolidate's Support List It can be found, including most of the engines. The following example uses the pug template engine
This article focuses on using different js template engines as preprocessors. A vue-loader is a loader for a webpack that converts Vue components written in a specified format to JavaScriptĪt the same time, vue-loader supports non-default languages, and by setting the lang property of the language block, you can use specified preprocessors, such as the most common sass syntax:
0 kommentar(er)
