[JS Master of the road] in layman Webpack Tutorial series 7-(Babel-loader,css-loader,style-loader) usage

What is loader, the official explanation for the file preprocessor, popular Point said Webpack in the processing of static resources, the need to load a variety of loader, such as HTML files, to use Html-loader, CSS files to use Css-loader, Style-loader and so on.

Official Reference Document: https://webpack.js.org/loaders/

We start with this article and re-establish a project structure to explain the use of loader.

First, the project structure to prepare:

Directory structure:

  1  demo3   2   dist   3   src   4   components   5   modal.html    modal.js   7   modal.less   8   m Ain.js   9   index.html  10   Package.json  11  Webpack.config.js 

Plugins that need to be installed, etc.:

1,NPM Init--yes (Initialize project Package.json)

2,NPM install [email protected]-g (Global installation WEBAPCK)

3,NPM install [email protected]--save-dev (Local installation Webpack)

4,NPM Install Html-webpack-plugin--save-dev (Installation Html-webpack-plugin plugin)

Related file code:

Webpack.config.js Code

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3Entry: './src/main.js ',4 output: {5Path: __dirname + '/dist ',6FileName: ' Js/[name].bundle.js ',7     },8 plugins: [9         NewHtmlwebpackplugin ({TenFileName: ' index.html ', OneTemplate: ' index.html ', AInject:true -         }) -     ] the}

Main.js File Code:

1 import modal from './components/modal.js '; 2 function () {3     console.log (' Project entry file Main.js ' ); 4 }5new App ();

modal.html File Code:

1 <div class= "modal" >2     <div class= "modal-heading" > Modal box head </div>3      <div class= "modal-body" > Modal box Content section </div>4 </div>

Modal.js File Code:

2 function () {3     return {4         ' component-name ': ' Modal '5    }6}7  default modal;

Modal.less File Code:

1 @c1: #09f;2 @c2: #666;3 . Modal{4 padding:20px;5 Div {6 margin:10px;7}8 }9 . modal-heading{Ten background:@c1; One} A . Modal-body{ - background:@c2; -}

After writing the structure and the code above, we begin to execute the webpack Packaging command, then install Babel-loader and turn Es6 into ES5

Official Reference Document: https://webpack.js.org/loaders/babel-loader/

Installation: NPM Install--save-dev babel-loader babel-core babel-preset-env webpack

Configuring the Webpack.config.js File

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Let path = require (' path ');3Module.exports = {4Entry: './src/main.js ',5 output: {6Path: __dirname + '/dist ',7FileName: ' Js/[name].bundle.js ',8     },9 plugins: [Ten         NewHtmlwebpackplugin ({ OneFileName: ' index.html ', ATemplate: ' index.html ', -Injecttrue -         }) the     ], - module: { - rules: [ -             { +Test:/\.js$/, -Exclude:/(Node_modules)/, + include: [ APath.resolve (__dirname, "src"), at                 ], - Use : { -Loader: ' Babel-loader ', - options: { -Presets: [' env '] -                     } in                 } -             } to         ] +     } -}

Explain the new additions to the configuration:

Rules is the configuration rule, he is an array, each item is an object, if there are more than one loader, then use more than one object, test:/\.js$/is the end of the. js file, exclude: Exclude node_modules this directory, Do not go to this directory to deal with. js files, what is the benefit of it? Greatly improve the speed of packaging. The configuration in the include is to use the JS file below the SRC directory as the target for processing, using the Babel-loader

Second, the use of CSS

1, create a new CSS directory under the SRC directory, create a new CSS file under the directory: STYLE.CSS, the code is as follows:

1 Html,body{2 margin:0;3 padding:0;4}5 Body{6 background:#08f;7}8 Ul,li{9 List-style-type:None;Ten} One Div{ A transition:All ease 1s; -}

Then import the CSS file in the Main.js

1 import modal from './components/modal.js '; 2 import './css/style.css '; 3 Let App = function () {4    console.log (' Project entry file Main.js '); 5 }6new App ();

Execute webpack Packing command, will error, prompt need a loader, we install Css-loader and Style-loader

Install command: npm install Css-loader style-loader--save-dev

Official Reference Document: https://webpack.js.org/loaders/css-loader/

Then configure Webpack.config.js:

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Let path = require (' path ');3Module.exports = {4Entry: './src/main.js ',5 output: {6Path: __dirname + '/dist ',7FileName: ' Js/[name].bundle.js ',8     },9 plugins: [Ten         NewHtmlwebpackplugin ({ OneFileName: ' index.html ', ATemplate: ' index.html ', -Injecttrue -         }) the     ], - module: { - rules: [ -             { +Test:/\.js$/, -Exclude:/(Node_modules)/, + include: [ APath.resolve (__dirname, "src"), at                 ], - Use : { -Loader: ' Babel-loader ', - options: { -Presets: [' env '] -                     } in                 } -             }, to             { +Test:/\.css$/, -Exclude:/(Node_modules)/, the Use : [ *' Style-loader ', $' Css-loader 'Panax Notoginseng                 ] -             } the         ] +     } A}

Do webpack packaging, you can see the CSS is embedded in the document, Css-loader is the processing of CSS files, Style-loader is to embed CSS into the browser

[JS Master of the road] in layman Webpack Tutorial series 7-(Babel-loader,css-loader,style-loader) usage