Webpack Check Gaps

Webpack is a modular packaging tool that allows us to organize code, compress, translate, and more easily through Webpack. But learning Webpack also need a certain cost, here records use Webpack for a long time some vague knowledge points, easy to consult later.

https://webpack.js.org/configuration/(This configuration file helps us to quickly understand the configuration properties in the actual project)

1. var path = require (' path '), where does the path need to be installed?

No need. After using the node environment, the path module is provided by node, so you do not need to do this with NPM install path.

2. What are the benefits of Webpack?

At the beginning, the use of Webpack can be convenient for us to organize the code, such as a project depends on a library, we can directly put this library JS in the HTML, and then introduce the JS file in another place, this JS uses this library, but they do not have obvious dependencies, and when the project is slightly larger, Not only are dependencies difficult to control, but many files are introduced and multiple HTTP requests are sent. But after using Webpack, we can start to organize dependencies from a portal file , so that the relationship is clear and can eventually be packaged into a JS, reducing the HTTP request.

3. Must you add a Webpack.config.js file under the root directory? The name doesn't change? Position cannot be changed? Since you can use the CLI, why use a configuration file?

No. In general, there is a webpack.config.js next to the root directory, and then you can use the Weibpack command in the CLI tool to find it by default Webpack.config.js in the root directory, and we can also name a different configuration file, such as My.config.js, just then we need to specify the corresponding parameters, such as Webpack--config my.config.js, Just this is still the default root directory. The advantage is that for large projects, there may be more than one configuration file, and we need a custom name.

Although you can use the CLI to accomplish the same command, you need to enter a large command every time. If you use a configuration file, you only need webpack, and more settings are prompted by the configuration file.

Of course, another more convenient and widely used approach is to use NPM scripts, such as NPM run build, to use "build": "Webpack" in scripts in Package.json.

4. In doing the project, we found that in the process of configuring Webpack, want to introduce images in the Jsx file or CSS is not successful, this is why?

Because Webpack thinks all the files in this project are modules, it's all he cares about. Unfortunately, Webpack only know the JS file, for the processing of JS is not a problem, but for CSS files, pictures, settings js derived jsx files are not recognized, if you want to reference these files normally, we must use Webpack four core concepts (entry, Output, plugins, loaders) in the loaders, that is, the module loader, for example, for the general React project, we need to ensure that the JSX, CSS, less and the normal loading of the picture, the configuration file is as follows:

Module.exports = {    entry: ["./src/index.js"],    output: {        path: __dirname + "/dist",        filename: " Bundle.js "    },    watch:true,    module: {        loaders: [        {            test:/\.jsx?$/,            loader: ' Babel-loader ',            exclude:/node_modules/,            query: {                presets: [' es2015 ', ' React ']            }        },        {            test:/\.css$/,            loader: ' Style-loader!css-loader '        },        {            test:/\.less$/, use            : [{                 Loader: "Style-loader"//Creates style nodes from JS strings             }, {                 loader: ' css-loader '//translates CSS into C Ommonjs             }, {                 loader: "Less-loader"//compiles less to CSS             }]        },        {            test:/\. ( Jpg|png|svg) $/,            loader: ' Url-loader '        }        ]    }}

The test property is used to detect the file type, and the loader property is used to describe the loader used.

Babel-loader is used to load jsx files, Css-loader is used to find all CSS files, style-loader for embedding CSS files into HTML, Style-loader, Css-loader, Less-loader to deal with less files, for picture files also need Url-loader loader to complete the module loading.

　　

5. In question fourth, we refer to the role of loaders, but what is the difference between loaders and rules is that the example used in loaders content can be found on the official website?

On StackOverflow, we can find this problem: https://stackoverflow.com/questions/43002099/ Rules-vs-loaders-in-webpack-whats-the-difference, the use of loaders is mostly in Webpack1, and rules are used in Webpack2, and loaders will be discarded in the future.

The official web site is described below:

Const PATH = require (' path '); const CONFIG = {  entry: './path/to/my/entry/file.js ',  output: {    path: Path.resolve (__dirname, ' dist '),    filename: ' My-first-webpack.bundle.js '  },  module: {    rules: [      { Test:/\.txt$/, use: ' Raw-loader '}    ]  }};module.exports = config;

However, there are some problems with JSX's query and exclude when using this method, which is not yet resolved. Because using WEBPACK2 and 1 differs, you need to find the answer further in StackOverflow.

6. What is the difference between loaders and plugins? Instance?

Loaders's role is mostly to solve a single file, convert it into a module, but plugins is a more powerful, powerful for packaging files to compile and other tools, loaders is generally used directly for different files using different loader, However, the use of plugins is first introduced through require and then created with the new instance in plugins to complete.

7. Why do you sometimes feel that the relative path referenced is not a problem, but what you see in the console is 404 Not Found? What is the difference between the path and the Publicpath in output in the Webpack configuration file (node side)?

https://webpack.js.org/configuration/output/#output-publicpath

The generic path will be used in conjunction with the built-in path module, and Publicpath is not. Path is where the final package is, and Publicpath's role is to refer to the location of the external resource. The two are completely different. The default is "". For example, in the Vue project I did earlier:

  Output: {    path:config.build.assetsRoot,    filename: ' [name].js ',    publicPath:process.env.NODE_ENV = = = ' Production '      ? Config.build.assetsPublicPath      : Config.dev.assetsPublicPath  },

Next, find the following in the config, build:

    Assetspublicpath: '/bbg/wechat2/',

That is, we use the resources on the server, especially when using node as the local server, if there is a problem with the Publicpath setting, we cannot get the resources.

For example, when we use node as the server side, we return an HTML page in App.get (), this page uses link to introduce an external CSS file or use script to introduce an external JS file, then package it before running the file, Then we can find the error 404, then, at the node side add the following lines of code:

Serve pure static Assetsvar Staticpath = Path.posix.join ('/', ' static ') App.use (Staticpath, Express.static ('./static ') ))

A pure static file placed on the server side, so that 404 errors are not reported.

8. When using react, webpack configuration, we can find that the end of our HTML added bundle.js (Note: This is what I added in advance, rather than let Webpack automatically added), So this bundle.js because packed into the dist under the static, so there will be 404 errors in the reference, how should this be solved?

　　Workaround One : The simplest solution, of course, is to package the packaged files directly under static, rather than dist, but such projects are difficult to understand. After trying: it's really doable.

　　workaround two : that is, we just want to use (dev) in the development environment, rather than in a production environment, in fact, similar to the project generated by VUE-CLI, we do not need to package bundle.js into Dist, but directly run it.

Webpack Check Gaps