webpack packages the js part by default, and other non-js modules cannot be processed by default
The css file is introduced as follows to pack an error, webpack can't handle it, and a loader is required
Configure the packaged css file
Configure package less files
write less file
Introduce less file
Package and generate bundle.js
Configure the packaged scss file
Note the red box
write scss file
import
Automatically add postCSS auto-compatibility prefix
New postcss.config.css
webpack.config.css
Package image and font files
such as loading a background image
report an error
Basic use of packaged image and font files
The image size is equal to the limit size, it will become the image path, otherwise it will be converted to base64
Configure babel to handle advanced syntax
The following statement:
Error, webpack can't handle advanced syntax
The processing is as follows:
Configure the loader of the vue component
Introduce vue single file
Error:
The processing is as follows:
The configuration is shown in the figure:
Using vue with webpack
set up:
webpack package release
Run npm run build to execute the webpack -p command. At this time, the webpack.config.js file will be read, and the packaging operation command will be read.
webpack.config.js generates dist directory
Just hand over the dist file to the backend developer for the server to go online.
Successfully run!
