To use this version of webpack4.XXX, we should first do the following preparations:
1. Download and install nrm npm i nrm -g
2. Display all storage nrm ls
3. Switch storage nrm use XXX
4. Install the global webpack4.XXX version npm i webpack -g
5. Download and install the default dependencies of webpack4.XXX npm i webpack-cli -g
6. Download cnpm npm i cnpm -g
Start building front-end projects with webpack
1. Initialize the project npm iniy -y
2. Use webpack to process source code webpack source file path -o output file path
3. The command used to download the third-party package cnpm i package name [-g | -S | -D]
The parameter -g means global installation
The parameter -S indicates the third-party tools that the project depends on when running
Parameter -D indicates the third-party tools needed for project development
4. Basic configuration of the file
Create a file called webpack.config.js under the root directory of the project
Start packaging the basic structure of our project
Step 1: Initialization command:
npm init -y (generate package.json file)
Step 2: Packaging command:
webpack entry file path -o output file path
Note: 1. Each modified main.js file needs to be repackaged , to generate a new bundle.js file, in order to get the desired effect 2. The path of the bundle.js file needs to be introduced in the index.html page)
Step 3: Automatically package, you need to install a webpack-dev-server, its command It is:
cnpm i webpack-dev-server -D
(Note: 1. Install the corresponding version of webpack local dependencies according to the prompt, the command is: cnpm i webpack@XXX -D
2. Add a file named webpack.config under the root directory .js file)
Writing of webpack.config.js file content:
const path = require('path')
module.exports = { entry: path.join(__dirname, './src/main.js'), //entry file output: { //specified output file path: path.join (__dirname, './dist'), //Output path filename: 'bundle.js' //Specify the name of the output file } }
After this step, you can enter the command in the terminal: webpack, and it can be automatically packaged
Step 4: Configure webpack-dev-server in the scripts (scripts) of package.json, namely: "dev": "webpack-dev- server --open --port 3000 --contentBase src --hot"
(Note: 1. At this time, if you enter the command npm run dev, an error will be reported. You need to install webpack-cli according to the error prompt. The command is cnpm i webpack-cli -D , run npm run dev again to run successfully
2. The page loaded at this time will still report an error. The reason is that the tool webpack-dev-server hosts this directory, and the path of the script tag introduced in the index.html page is wrong. Sometimes we need to use another tool, html-webpack-plugin, which can help us automatically host the generated bundle.js file in memory. At the bottom of the page, we can comment the path we wrote in the index.html file Step
5: Install html-webpack-plugin, the command is:
cnpm i html-webpack-plugin -D
Add in the configuration file (webpack.config.js):
const htmlWebpackPlugin=require('html-webpack-plugin')
plugins: [ //Configuration node for all webpack plugins
new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), //Specify The path of the template file filename: 'index.html' //Set the name of the generated memory page }) ]
Step 6: Import the css style, create the corresponding index.css, and expose it in the main.js file, namely: import './css/index.css' (note: an error will be reported at this time, because it will not Recognize the .css file, you need to install other tools)
Step 7: Install style-loader and css-loader, the command is:
cnpm i style-loader css-loader -D
Add in the configuration file (webpack.config.js) :
module: { //Configure
rules for all third-party loader modules: [ //Matching rules for third-party modules
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } / / loader that handles css files
]
}
Add in main.js file:
import './css/index.css'
Step 8: Install less-loader and less, command:
cnpm i less-loader less -D
Add in matching rules:
{ test: /\. less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //Process the loader for less files Step 9: Install sass-loader
and node-sass commands:
cnpm i sass-loader node-sass -D
Add in matching rules:
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // The loader that processes scss files
exposes these two files in main.js import './css/index.scss' or import './css/index.less'
Step 10: Install url-loader and file-loader
cnpm i url-loader file-loader -D
Add in the configuration file:
{ test: /\.jpg|png|gif|bmp|jpeg$/, use: 'url-loader' }, // loader for processing image paths
Step 11: Install babel, which can parse the new syntax of ES6 or ES7. Two sets of packages need to be installed. The command is as follows: The first set: cnpm
i babel-core babel-loader babel-plugin-transform-runtime
-D Two sets: cnpm i babel-preset-env babel-preset-stage-0 -D
Add the following configuration rules in the configuration file (webpack.config.js):
{test:/\.js$/,use:'babel- loader', exclude:/node_modules/}
Create a file named .babelrc in the root directory, configure this file, (note: this file is in JSON format, so it must conform to the json syntax rules, for example: cannot write comments, strings must use double quotes, etc.), as follows:
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
Step 12: Import vue, the command is:
cnpm i vue -S Add var vm = new Vue({ el: '#app', data: { msg: '123' } }) to expose
in the main.js file The first way of the file: add in main.js: import Vue from '../node_modules/vue/dist/vue' The second way: add in main.js: import Vue from 'vue' in the configuration Add in the file (webpack.config.js) (note: same level as module and plugins): resolve:{ alias:{//Modify the path reported when vue is imported "vue$":"vue/dist/vue.js " } } Create a login.vue file, which contains components Import components in main.js: import login from './login.vue' (Note: because the default webpack cannot package .vue file, you need to install the relevant loader) Step 13: Install vue-loader and vue-template-compiler -D
cnpm i vue-loader vue-template-compiler -D
Add in main.js:
var vm = new Vue({ el: '#app', data: { msg: '123' }, render:function(createElement){ return createElement(login); } }) Add in webpack.config.js: const VueLoaderPlugin = require('vue-loader/lib/plugin') Add in plugins: new VueLoaderPlugin() Step 14: Install routing command: cnpm i vue-router -S // 1. Import vue-router package import VueRouter from 'vue-router' // 2. Manually install VueRouter Vue.use(VueRouter)
I believe that after reading this article carefully, you can build the most basic structure! If you have any questions or inappropriate writing, please point it out.