webpack_ (Chapter II) _ use webpack profile

webpack profile
webpack module is a packaged tool to help us put modules are packaged together, when introduced pictures modules and JS modules, processes and packaged way of introduction is certainly different. Add to Citation is JS file, JS file directly took to execute on it, if introduced into an image file, actually only need to get the address of the picture on it, you do not need the whole package to the image file inside js go with. When packaged in a file which is packaged import documents, packing out where to put the file, which requires a configuration file to tell webpack how to package.
When we perform npx webpack index.js, without any configuration can be successfully packaged in with the dist directory will generate a file. In fact webpack team for the convenience of developers have been using the default configuration in rich webpack, although did not write the configuration file, but the file with its default configuration. If you want to write that webpack configuration file in the project, how to do?
We can create a file in the project directory, webpack default configuration file named webpack.config.js
we run from the command line npx webpackwill complain

because we are running a previous npx webpack index.jsindex.js meant to make webpack packaged index.js this file If direct write npx webpack, then webpack do not know to be packaged project file is the entrance which we can do in webpack.config.js packaged configuration file
syntax CommonJS, writing an object, you can do the configuration on the inside, these configurations are available to configure the interface of webpack

const path = require('path)
module.exports = {   
// entry 就是指定项目打包从哪一个文件开始打包 
  entry:  './index.js'    // webpack.config,js 和index.js在同一目录下,这样写没问题
  // output 指定打包完成之后的文件地址
  output : {
    filename: "bundle.js",   // 打包生成之后的文件名
    path:  'path.resolve(_dirname, 'bundle)'    // 默认是放在dist文件下，可以换文件夹的名字,path指的是打包生成我的文件放在哪一个文件夹下。path后面要跟一个绝对路径,直接写名字是不行的，要引入一个node的核心模块，在配置文件上面引入path : const path = require('path),引入一个叫path 的 node 的核心模块，然后调用这个path.resolve方法,  'path.resolve(_dirname, 'bundle)'中，_dirname这个node里面的变量，实际上指的是webpack.config.js文件所在的当前这个目录的路径，把它和bundle做一个结合，这样的话生成的路径就是bundle这个文件夹的绝对路径
  }
}

After the above configuration is good, there webpack a standard configuration file, the configuration file from bundle.js asked us to pack, packing the resulting files in the bundle folders, packing the resulting file name is bundle.js
run npx webpackto generate a package file.

The process is when we run npx webpackwhen, webpack do not know what is packaged file, you will find webpack.config.js, packaged according to the output profile of the process. Suppose we webpack.config.js changed to another name, then run the npx webpackpackage will error, because webpack not find the default configuration file, the default configuration file must be called webpack.config.js.
That is, if we do not want to use this configuration name? If our configuration file called WebpackConfig.js file, then run time to write npx webpack --config WebpackConfig.jslet webpack to WebpackConfig.js as a profile package.

Now that we have mastered the basic use webpack now do some structural optimization of the project.
index.js file can not be run directly in the browser, final code must be packaged by the weback generated in the browser can run in, so index.js source code, source code in general we will call a src directory, then all of the source code in the src directory. As follows:

Note that the src index.html not put in
because index.js position has changed, so should webpack.config.js entry file change it

in the packaging process, we will often use npx webpackto run our project package usually vue project and React project using npm run this command run, how to simplify the code package npm scripts with
us, there will be scripts tag configuration items, we can configure some commands in the object inside the package.json file:

  "scripts": {
   “bundle” : "webpack"   // 当执行bundle这条命令的时候，会自动执行webpack这条命令，帮助我们打包（webpack就是打包），在命令行中运行npm run bundle 就可以帮我们打包，代替npx webpack
  }, 如果在scripts中bundle命令中使用webpack，会先到工程目录下node_modules中去找webpack，而不是找全局的webpack，所以不用写npx webpack

We will put dist index.html file, index.html in JS js file pointing to the package, you can run a normal web page

Recall run webpack:

1. global global installation webpack, runwebpack index.js
2. local local installation webpack, runnpx webpack index.js
3. npm run bundle: The local installation, specify the package file in webpack.config.js entrance, and then you can configure the look in red package.json file npm scripts script can be run directly npm run bundle command on it
   these three are in the command line to run webpack.

When installing webpack, we also installed a webpack-cli package, webpack-cli is to do what?
Its role is to make us the right to run the command line webpack this command, assuming no installation webpack-cli package, you can not run this command webpack or npx webpack this command on the command line.

Learning the official website:
DOCUMENTATION ----> Getting Started everything under this directory