Webpack Configuring the installation of the SAN

Objective

Just started to learn SAN, not familiar with the Webpack, the configuration of the SAN environment process is a bit difficult, rare out, or record!

Process

First, open the command line under the new project folder, first install Webpack (Note: The file name conforms to the naming convention)

NPM Init-y (can also be initialized with NPM init if the content in the Package.json is set)

NPM install--save-dev webpacknpm instal  --save-dev webpack-cli

After executing the above command, create a new two folder in the project folder./src and./dist, respectively, for storing index.js files and index.html files, at which time the directory is

--Dist---index.html--src---index.js--node_modules--package-  Lock. JSON--package.json

Webpack need to have a portal file for the './src/index.js ' file, create a new folder in the project file, with a portal file that needs to be packaged out

NPX Webpack (used in node 8.0 +)

After installation, a file named Bundle.js is generated in the./dist file, in addition, it is worth mentioning that in the project, because JS and style will be frequently modified, you can use the automatic refresh function to help implement, installation instructions

NPM Install Webpack-dev-server--save-dev

Modify the contents of script in Package.json after installation

"Script": {    "start""webpack-dev-server--mode Development  ",    "build""webpack--mode Production "}

Webpack--mode Development (Webpack--mode production)

You can choose one of the above ways to package, the specific difference reference https://webpack.js.org/concepts/mode/

Export the./src/index.js package to the./dist/main.js

About the Webpack.config.js file, you can configure it yourself

In addition, Webpack supports the introduction of any type of file via loader

NPM Install--save-dev Style-loader css-loader-g

If you need to use Babel-loader to convert JS code, you also need to install Babel-loader

NPM Install--save-dev Babel-loader babel-core

Not to be continued ...

Webpack Configuring the installation of the SAN