Preface: webpack packaging tools to make the whole project a different folder related to each other, we want to follow the rules. Want .vue file, .scss file browser does not recognize, therefore webpage secretly do a lot of translation, compilation work.
In fact, if we do not increase before the configuration file webpack is configured by default, such as when the project beginning we did not add webpack.config.js, but we can still run npx webpack index.js terminal
Or pack. But this does not satisfy a variety of complex configuration files in a project, so we can be configured to conform to the current project configuration files themselves -> webpack.config.js.
The first step: the first stage in the project directory Add webpack.config.js file.
Part II: Writing packaged entrance, a variety of configuration items and export packing
Part III: Export Configuration
As shown below:
The figure is the most basic package configurations:
1, The index.js entry file is packaged, its path is "./src/index.js". main meaning is the default packaged into main.js.
2, packaged export files can be arbitrarily set, such as: bundle.js. Introducing path module using path.resolve () method,
Makes creating dist same level in the src directory (can be arbitrarily named) folder to store bundle.js and other documents.
3, between the inlet, outlet configuration should have a lot of a lot of configuration in accordance with our requirements herein, this is only the basic configuration acquaintance, later to continue recording.
In addition , if accustomed to using npm, you can configure the script in package.json file in write:
When running this package npm run bundle on it.