A brief summary of Webpack learning

Webpack Use Summary: Getting started with:

This error indicates the need to install the appropriate Loader, and specify the corresponding Loader when referencing

Successful execution

Chunk refers to the corresponding block.

if the CSS is introduced correctly: must introduce Css-loader, to make the change of CSS to take effect, to introduce style-loader;

each JS function call can only be written in its own function, the introduction of only the meaning of merging, but can not directly use the introduction of JS function.

and Style-loader to write in front of the css-loader, otherwise reported the following error.

after successful execution,the CSS is inserted into the head tag.

Loader correct order: "style-loader!css-loader!. /style.css "

The load order of the loader is loaded from right to left, so

Loader correct order:: Style-loader!css-loader!postcss-loader!less-loader

The location of the precompiled loader in Webpack, such as Sass-loader or Less-loader, is:

1. first put Sass-loader or Less-loader

2. Postcss-loader

3. Css-loader

4. Style-loader

Note: If one of the CSS import imports another CSS, another CSS Postcss-loader does not take effect, this time to add a parameter to Css-loader, specify import imports CSS number:

Loader: ' Style-loader!css-loader?importloaders=1!postcss-loader '

for ease of use, you cannot add loader every time you introduce CSS, you can do it in a command:

Webpack hello.js bundle.js--module-bind ' Css=style-loader!css-loader '

Remove the module introduced into the CSS loader,1.x can, 3.0 will still error.

--watch

add--watch at the back of the command, so you can change it automatically without having to execute the command every time you change

Note: Changes to the webpack configuration require a reboot, even if the listener is set to be manually recompiled;

about Version installation issues: Write the name and version number of the NPM module you want to install in the Package.json dependency, and then NPM install will be installed automatically

However, it is still cumbersome to enter many commands at a time, the workaround:

If you want to configure the input webpack command in advance, under script in Package.json , define a Webpack property, followed by the command that defines all the webpack to be entered. Once defined, run the command in the command Window NPM run Webpack, as defined in the same way as the dev in npm run dev.

--progress Viewing the packaging process

--display-modules Viewing packaged Modules

--colors command plus color-coded after packing

--display-reasons Show Packaging reasons

--watch Automatic monitoring file changes, if changed, automatic packaging, but modify the Webpack configuration needs to be manually compiled.

webpack configuration file

Error:

The path for output outputs is written like this:

Rather than this:

Webpack packaging is finished, the package is displayed successfully, but there is no production of packaged files and folders , so remember to write the __dirname+ "path" in the path first.

Personal Understanding: If written __dirname+ "/path", then there is no need to put the JS folder, this will be automatically created, otherwise, even if the execution is successful, but will not see the packaged JS file, if you have created a good pre-packaged JS storage folder, You do not need to write __dirname. "FAQ"

If you change the number of portal files, such as array form, or object form, you will need to manually run NPM run Webpack again.

Array: Writes multiple entry files as an array, then merges into the specified one after a packaged file

Objects: Individually packaged into multiple files

Note: A chunk represents a chunk, then different chunk will be packaged into different files, and if output is written to a path, then the second chunk will overwrite the first chunk, the workaround, the Chunkname+hash as a placeholder, Then several chunks are packaged into chunks of filename: "[name]-[hash].js]

Error reason: The path of the entry file is written in a single quotation mark set of double quotation marks, so it is not recognized.

The hash value can be interpreted as the version number, and the hash value changes only when the file changes.

Hash values are useful for versioning management of static resources.

webpack Plug-in

NPM Installs the plugin

NPM Install plugin name--save-dev

a very useful Webpack plug-in: Html-webpack-plugin

Installation

Install Html-webpack-plugin--save-dev

Use:

The plug-in is first introduced in the Webpack.config.js,

var htmlwebpackplugin = require (' Html-webpack-plugin ');

then you only need to modules add the attribute plugins in the Webpack configuration to initialize the plug-in.

The wording is as follows:

plugins: [new// Initialize plugin instance ]

If you want to package your HTML page in a corresponding package folder: Map a template to the plugin:

plugins: [new  htmlwebpackplugin ({Template: "index.html"})]

if the HTML page wants to output to the outermost directory of the packaging folder, and then JS and other files to output to the JS corresponding folder, then output when the JS path is configured separately to the corresponding directory filename.

Code

output: {        "js/[name]-[hash].js",        path: __dirname+ "/dist"},

The file structure of the output

Plug-in properties:

plugins: [        new  htmlwebpackplugin ({            filename:"index-[hash].html",            Template:' index.html ',            inject:"Head",            title:"I am title",            Date:  New  Date (),        })]

the properties and values defined in plugins can be presented in the form of a <%=%> template engine in the page.

eg

<%=HtmlWebpackPlugin.options.title%>and can take the value after the for loop<%  for(Var key in htmlwebpackplugin.files) {%><%=Key%>:<%=json.stringify (Htmlwebpackplugin.files[key])%><% } %>

through the files and options to see what the plug-in corresponding to the properties, so that if there is more than one JS in the page, some want to put to the head, some like put into the body, you can directly in the page with the template engine to introduce JS.

Eg: <script type= "Text/javascript src=" <%= htmlWebPackPlugin.files.chunks.main.entry%> ">

[At this time inject to remember set to FALSE]

Minify: Compression "specific to www.npmjs.com in the official website Htmp-webpack-plugin"

Multi-page configuration:chunk:[]

Plugin is an array, if you want to package into multiple pages, just write multiple instances of creating plug-in objects, write the chunk attribute to each instance, the attribute is an array, the corresponding JS name in each array.

Excludechunks:[] except for some

loader of processing template files

To install the loader method:

NPM  Install  xxx-loader  --save-dev

First install the Html-loader:

NPM  Install  html-loader  --save-dev

Configure the loader in webopack.config.js

1. first write your own HTML code,

<style= "width:100%;height:100%">    <H1 > template file Processing test </H1></div> 

1. and then import the HTML file in the corresponding JS,

Import TPL from '. /layer.html '; function layer () {    return  {        name:' layer ',        tpl:tpl    default Layer

1. then go The JS file is imported into the app.js,
2. finally in Rendering in App.js to index.html

Import Layer from './layer.js 'function  () {    var dom = document.getElementById ( ' app ');     var New Layer ();     = layer.tpl;}; New APP ();

for html-loader specific code, see the official website templating ...

for complex template engines, install Ejs-loader

the suffix format can be. Tpl/.ejs

when introducing the template file of the TPL, the return is not a string, it is a function

Webpack configuration:

{    test:/\.ejs$/,    loader:' Ejs-loader '

'./src/js/layer.js 'function  () {    var dom = document.getElementById (' app ' );     var New Layer ();     = Layer.tpl ({        name:' John ',        arr:["1111", "2222", "3333"]    }); New APP ();

Layer.tpl

<Divclass= "Layer">    <Div>This is<%=name%>Layer</Div>    <%  for(var i= 0; I<arr.length; I++) { %>        <%=Arr[i]%>    <% } %></Div>

[Webpack 3.0 Error]bundle.js:84 uncaught typeerror:cannot set Property ' InnerHTML ' of NULL

handling pictures and other documents Loader

File-loader

Installing Loader

NPM Install File-loader--save-dev

Webpack Configuration

{     test:/\. ( Png|jpg|gif|svg) $/,     loader:' File-loader ' },

either in the root directory or under the Index.html Direct Reference (absolute path no problem, relative problem can be resolved), or CSS in the background image reference, or in the template file reference, in the role of File-loader, are successfully parsed. In the template engine file, SRC can be introduced in the form of require ("relative path"), which can be successfully introduced, but the direct reference to the relative address is not resolvable.

Url-loader:

When the picture is smaller than the specified size, use Url-loader to automatically convert to File-loader when it is larger than the specified size

{   test:/\. ( Png|jpg|gif|svg) $/,   loader:' Url-loader ',   query:{         limit:// specify size, in kilobytes     Name:"src/[name]-[hash:5].[ EXT] "  

Image-webpack Loader

Image Compression Loader

A brief summary of Webpack learning