Detailed explanation WebPack + ES6 + SASS to build multi-page applications

WebPack compared to previous GULP, Gulp belongs to the non-modular package tool. WebPack is a modular package tool. The advantages and disadvantages of the two are not excessive analysis (can be Baidu).

Objective: To share the use of plugins, Loader, the various problems encountered during use, and the final code will be attached.

In this project, use WebPack CSS, SCSS, JS, Pictures, JQuery, third-party plugins, font icons, compile ES6, compressed HTML, compressed JS, compression CSS, basically covering common things .

详解webpack+ES6+Sass搭建多页面应用

Separates a few difficulties

1, package multi-page, use the plugin is HTML-WEPACK -plugin, HTML-Loader, that is, how many pages do you have, how many entrances, how many template files are written. Of course, you can consider traversal processing over time.

// Introduced Path Plugin const path = Require (‘PATH’); // Introduced Export HTML Plugin const htmlwebpackplugin = request (‘html-webpack-plugin “; Const config = {// Entrance entry: {home: ‘./ pages / lawsearchhomepage.js’, list:’ ./ Pages / LawSearchList.js’}, // Exit Output: {filename: ‘[name] .bundle. JS ‘, PATH: path.resolve (__ DIRNAME,’ Build ‘)}, // Plugin Plugins: [// HTML Separate Export Plugin – Home NEW HTMLWebPackPlugin ({filename: ‘lawserchhomepage.html’, // output file name template: ‘./ pages / lawsearchhomepage.html’, // template page path favicon: ‘./ Pages / ImageS / Favicon.ico’, / / Terminal icon Chunks: [‘Home’], // Need to introduce JS file name inject: true, hash: true, // hash {// Compressed RemoveComments: true, collapsewhitespace: true}}), // HTML Separates Plug-in – List New HTMLWebPackPlugin ({filename: ‘lawsearchList.html’, Template: ‘./ pages / lawsearchlist.html’, Favicon: ‘, Chunks: [‘List’], INJECT: TRUE, HASH: True, MiniFy: {RemoveComments: true}}}}}}})}}}}]} Module.Exports = Config;
   
2, separately package CSS, use the plugin extract-text-webpack-plugin, Loader has Style-Loader, CSS-Loader, Sass-Loader, Node-Sass, because each page is to introduce a corresponding CSS file, so in the JS entry file, in the JS portfolio, reference to the corresponding SCSS file After packaging, the CSS file will be packaged separately and introduce HTML

// through the form of LINK.
 // introduced the export CSS plug-in Const extractTextPlugin = Require ('extract-text-webpack-plugin) '); // loader {// CSS Test: / \. CSS /, Use: extractTextPlugin.extract ({USE: [' css-loader ']}}}}, {// Sass test: / \. SCSS /, Use: extractTextPlugin.extract ({Fallback: "Style-loader", Use: ['css-loader', 'Sass-loader']},)} // plugins // Package CSS Separate Package New ExtractTextPlugin ({FileName: "[Name] .css", // Develop the compiled file name allchunks: true, // Pack the split block}),   
3, process ES6 , Install Babel, Babel-Loader @ 7 (because of the following compressed JS, other version error), Babel-core, babel-preset-es 2015 (also to solve the compressed JS error)

 // loader {// ES6 Test: / \. Js $ /, loader:'Babel-Loader', // Exclude: __ DIRNAME + 'Node_Modules', // Don't make Babel conversion, this is already packaged, this can reduce packaging time // include: __ dirname + 'src' here SRC is you want to compile JS file directory, exclude: path.resolve (__ DIRNAME, 'PAGES'), Query: {// If you define this PRESETS in Package.json, You can delete Presets: ['ES2015']}},   4, process jQuery, install expose-loader 
The first method can be passed JS Require (‘Expose-Loader? $! jQuery “); introduced jQuery

second type through Loader

// loader {// jQuery Test: Require.Resolve (‘jQuery’), use: [{loader: ‘Expose-loader’, options: ‘jQuery’}, {loader: ‘Expose-loader’, Options: ‘$’}]},
 5, compressed CSS, use the plug-in Optimize-CSS-Assets-WebPack-Plugin installed CSSNANO   
// introduction Connected CSS Plugin Const OptimizeCss = require ( ‘optimize-css-assets-webpack-plugin’); // widget introduced cssnano const cssnano = require ( ‘cssnano’); // pluginsplugins: [new optimizeCss ({assetNameRegExp: /\.style\.css $ / g, cssprocessor: cssnano, cssprocessorOptions: {discardcomments: {transward: true}}, canprint: true}}, canprint: true}}, canprint: true}}, canprint: true}),] // Compression optimization CSS, do not write this CSS or not compressed, do not know 为 Optimization: {/ / minimize: True, Minimizer: [New OptimizECSS (})]},

6, compress JS, in general, JS is compressed by default, but After the CSS is compressed, JS is not compressed, so it is handled, the plug-in for compiling faster
uses the plugin UglifyJS-WebPack-Plugin
   
/ / Introduced JS compression plugin const uglifyjs = required (‘uglifyjs-webpack-plugin); // pluginsnew uglifyjs ()

Plugin installed in my package.json
 "devdependencies": {"babel": "^ 6.23.0", "BAbel-core ":" ^ 6.26.3 "," Babel-Loader ":" ^ 7.1.5 "," Babel-Preset-ES2015 ":" ^ 6.24.1 "," Clean-WebPack-Plugin ":" ^ 0.1.19, "CSS-Loader": "^ 1.0.0", "CSSNANO": "^ 4.1.7", "Expose-loader": "^ 0.7.5", "extract-text-webpack-plugin ": ^ 4.0.0-beta.0", "File-loader": "^ 2.0.0", "font-awesome -webpack": "^ 0.0.5-beta.2", "html-loader" : "^ 0.5.5", "HTML-Webpack-Plugin": "^ 3.2.0", "jQuery": "^ 3.3.1", "Node-Sass": "^ 4.9.4", "Optimize CSS-assets-webpack-plugin ":" ^ 5.0.1 "," Postcss-loader ":" ^ 3.0.0 "," Sass-loader ":" ^ 7.1.0 "," Style-Loader ":" ^ 0.23.1 "" TypeaHead.js ":" ^ 0.11.1 "," Uglifyjs-WebPack-Plugin ":" ^ 2.0.1 "," Url-loader ":" ^ 1.1.2 "," WebPack ": "^ 4.23.1", "Webpack-CLI": "^ 3.1.2", "WebPack-Dev-Server": "^ 3.1.10"}   
Code in WebPack.config.js (Complete

// Introduced path plugin const path = request (‘Path’); // Introduced to export HTML plugin const htmlwebpackplugin = request (‘html-webpack-plugin ” ); // clear the plug is introduced const CleanWebpackPlugin = require ( ‘clean-webpack-plugin’); // widget css introduced deriving const ExtractTextPlugin = require ( ‘extract-text-webpack-plugin’); // webpackconst webpack = require introducing (‘WebPack’); // Introduced Content Optimizecss = Require (‘Optimize-CSS-Assets-WebPack-Plugin’); // Introduced Cssnano Plugin Const Cssnano = Require (‘cssnano’); // Introduced JS Compressed plug-in const uglifyjs = required (‘uglifyjs-webpack-plugin’); // WebPack configuration content const config = {// Entrance entry: {home: ‘./ pages / lawsearchhomepage.js’, list:’ ./ Pages / LawsearchList.js’}, // Easy to debug deVTool: ‘inline-source-map’, // service devserver: {contentBase: ‘./ build / lawsearchhomepage.html’}, // loader module module: {Rules: [{// es6 test: / \. js $ /, loader: ‘Babel-loader’, // exclude: __ dirname + ‘node_modules’, // Do not convert this Babel conversion, this is already packaged, this can be reduced Package time // include: __ dirname + ‘src’ The SRC here is the directory of the JS file you want to compile, exclude: path.resolve (__ DIRNAME, ‘Node_Modules’), include: path.resolve (__ DIRNAME, ‘PAGES’), Query : {// If this presets is defined in Package.json, you can delete Presets: [‘ES2015’]}}, {// jQuery Test: Require.Resolve (‘jQuery’), USE: [{ Loader: ‘Expose-Loader’, Options: ‘jQuery’}, {Loader: ‘Expose-Loader’, Options: ‘$’}]}, {// CSS Test: / \. CSS /, USE: ExtractTextPlugin.extract ({USE: [‘CSS-Loader’]}}}}, {// Sass Test: / \. SCSS /, USE: ExtractTextPlugin.extract ({Fallback: “Style-Loader”, Use: [‘CSS-Loader’, ‘Sass-loader’]},)}, {// Processing Module HTML TEST: / .TML$/, Use: ‘HTML-Loader’ }, {// Picture Test: /\.(JPG|Png|GIF) $/, use: {loader: ‘file-loader’, options: {OutputPath: ‘Images’}}}}, // Font Icon {TEST : /\.( (IOT|VG|TTF|WOFF|Woff2 )\w*/, loader: ‘file-loader’}]}, // Plugin Plugins: [// Empty BUILD file new CleanWebPackPlugin ([ ‘build’]), // Pack the CSS separately package new extractTextPlugin ({filename: “[name] .css”, // Develop the compiled file name allchunks: true, // Pack the split block}), // HTML separately exported plugins – Home new htmlwebpackplugin ({filename: ‘lawsearchhomepage.html’, // Output file name template: ‘./ pages / lawserchhomepage.html’, // template page pathFavicon: ‘./ Pages / Images / Favicon.ico’, // Terminal Icon Chunks: [‘Home’], // Requires the introduced JS file name Inject: true, hash: true, // hash mify: {// compression removeComments: true, collapseWhitespace: true}}), // html derive separate widget – list new HtmlWebpackPlugin ({filename: ‘lawSearchList.html’, template: ‘./ pages / lawSearchList.html’, favicon : ‘./ pages / images / favicon.ico’, Chunks: [‘List’], Inject: True, Hash: true, minify: {transovecomments: true, collapsewhitespace: true}}, // Compressed CSS New OptimizECSS {askETNAMEREGEXP: /\.Style}: cssnano, cssprocessor: cssnano, CSSProcessorOptions: {discardcomments: {removeall: true}}, canprint: true}), // compression JS new uglifyjs ()], // Compression optimizationCSS Optimization: {// minimize: true, minimizer: [new optimizecss ({})]}, // Export Output: {filename: ‘[name] .bundle.js’, Path: path.resolve (__ Dirname,’ Build ‘)}} module.exports = config;
   If the report module is not defined in the packaging process, then install it once, it is not, directly deleted the Node_Modules file. , Re-NPM INSTALL. 
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment