Article Directory

review
webpack development server configuration

Configure Developer Server

webpack converter

css file
sass file
Handle less files
stylus file
js advanced syntax
If the style contains a background image
Question: The suffix name can be omitted in the vue project, and the @ symbol points to the src file directory

webpack build vue project

review

Insert picture description here

Question: What if the exported js file needs to be displayed in an absolute path?
Question: running npm run serve in the vue project opens a server localhost: 8080, through which you can access our project

webpack development server configuration

cnpm i webpack-dev-server -g
cnpm i webpack-dev-server -D

At this time on the command line, you can start the server through webpack-dev-server, the default port number is 8080
Insert picture description here

If you want to modify the default port, if you run successfully, it will automatically open the default browser to run, set the server proxy, etc ...

Configure Developer Server

Insert picture description here

webpack converter

css, sass, less, stylus, js advanced grammar, font files ... as a module, you need to use a converter

css file

Insert picture description here

Configure parser options

cnpm i style-loader css-loader -D

sass file

src/scss/main.scss
Configure parser options

cnpm i node-sass sass-loader -D

Handle less files

src/less/main.less
Configure parser options

cnpm i less less-loader -D

stylus file

src/stylus/main.stylus
Configure parser options

cnpm i stylus stylus-loader -D

js advanced syntax

Some advanced grammars of JS can't be directly parsed by repeating grades, and they need to be converted to use

cnpm i @babel/core babel-loader -D

If the style contains a background image

Insert picture description here

cnpm i file-loader url-loader -D

Question: The suffix name can be omitted in the vue project, and the @ symbol points to the src file directory

Insert picture description here

view
react

Vue and react use a lot of es6 and above syntax,
create the file .babelrc in the root directory of the project, install dependencies, and configure as follows

cnpm i @ babel / preset-env -D (advanced syntax of js)
cnpm i @ babel / preset-react -D (development react)

Insert picture description here

Copy webpack.config.js and package.json and add .babelrc file to your project file, perform installation dependencies, create your own src folder and public folder, add the entry file to index.js, public folder Below is index.html