The preparatory work

Make sure you have Node.js installed on your computer; After the installation is complete, run the node -v command to view the version number.

npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm

Create a project

  • runcnpm init -yInitialize the project
  • Create the dist and SRC folders in the project root directory and create a new folder in the SRC directoryindex.html 和 index.jsThe file inwebpack4.XThe default package entry path issrc/index.jsFile, the packaged output file isdist/main.js. Of course, if you want to change the default package entry file path can be inwebpack.config.jsConfiguration in fileentry:'url', // import file)
  • runcnpm i webpack -D cnpm run webpack-cli -DThe installationwebpack
  • Open up ourpackage.jsonIf you see the code in the figure, the installation is successful
  • Create a new one in our project root directorywebpack.config.js webpackIn addition to passing in parameters on the command line, the command can be executed using the specified configuration file. By default, webpack.config.js is searched in the current directory. This file is a Node.js module that returns a configuration object in JSON format.
By default, webpack can only package files with explicit.js suffix, such as.vue and.png. Therefore, configure a third-party loader
// Expose a packaged configuration object; Because WebPack is built on Node, WebPack supports all node apis and syntax
module.exports = {
   mode:'production'.// the development environment is not compressed
   //production Production environment compression

   module: {// Match rules for all third-party modules
       rules:[  // The third party matching rule use indicates that one loader can be written as a string, and multiple loader can use an array. Note that exclude excludes node_modules or the project will not run
           {test:/\.js|.jsx$/.use:'babel-loader'.exclude:/node_modules/}}}]Copy the code
  • At this point, each time we run our project, we need to manually enter it in the terminalwebpackTo launch the project, and at this time in ourindex.htmlThe file needs to be manually imported under our dist foldermain.js <script src=".. /dist/main.js"></script>Very inconvenient for our development
  • runcnpm i webpack-dev-servver -DInstall the live hot update plugin to openpackage.jsonFile to seeWebpack dev - server ":" ^ 3.8.0The installation is successful.
// Webpack-dev-server packaged main.js is hosted in memory and does not exist on our physical disk, greatly improving performance
// However, this main.js exists in our project root directory and can be referenced directly
//<script src="/main.js"></script>
Copy the code
  • Open thepackage.jsonFile below the “scripts” configurationdev
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "Webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"}, //--open You can add the browser name to the browser //--port 3000 port number //--host 127.0.0.1 Specifies the domain nameCopy the code
  • We can still runcnpm i html-webpack-plugin -DStart the plugin that generates the Index page in memory to improve performance, and open ours after successful installationwebpack.config.jsfile
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // Import a plugin that automatically generates index pages in memory

// Create an instance object of the plug-in
//path.join() is used to join paths. The main purpose of this method is to use the correct path separator on the current system, which is "/" on Unix and "\" on Windows.
//__dirname always points to the absolute path of the js file being executed

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/index.html'),   / / the source file
    filename: 'index.html'  // The name of the generated home page in memory
})

// Generate an index home page in memory based on the home page in the template path
// Using this plugin, you can add manually introduced main.js annotations to index.html

module.exports = {
    mode:'production'.// the development environment is not compressed
    //production Production environment compression

    plugins:[   // Inject our configured plug-in
        htmlPlugin
    ],
    module: {// Match rules for all third-party modules
        rules:[  // The third party matching rule use indicates that one loader can be written as a string, and multiple loader can use an array. Note that exclude excludes node_modules or the project will not run
            {test:/\.js|.jsx$/.use:'babel-loader'.exclude:/node_modules/}}}]Copy the code

At the end

About the difference between -d -S during installationCopy the code

-s: stands for –save. This is the declaration of dependencies for production environments (frameworks, libraries used in developing applications) such as JQ, React, and vue. It goes to “Dependencies.”

-d: –save-dev — declaration of dependencies on the development environment (build tools, test tools) such as: Babel, webpack, all in the current directory. It goes to “devDependencies.”