Problems with modern front-end development

  • Adopting modular development
  • Use new features to improve efficiency and ensure security
  • Monitor the development process in real time using hot updates
  • Package compression optimization of project results

What is a webpack

  • Provides static module packaging tools for modern JavaScript applications

Webpack function

  • Packaging: Different types of resources are packaged according to module processing
  • Static: The final output of static resources after packaging
  • Modules: Webpack supports modules with different specifications

Basic use of Webpack

  • The project initializes NPM init-y
  • Install webpack webpack-cli, yarn add webpack webpack-cli
  • Create SRC path
  • Create index.html for future display of content
  • Write es6 and other higher-order syntax in SRC /js/utils.js
const sum = (m, n) = > {
    return m + n
}

const square = (m) = > {
    return m * m
}

export { sum, square}
Copy the code
  • Import using the import syntax in SRC /index.js
import {sum, square} from './js/utils.js'

console.log(sum(10.20));
console.log(square(10));
Copy the code
  • Import the index.js file under /index.html

  • At this point, the browser passeslive-serverAn error occurs when you open index.html

  • The reason for the error is that the browser does not support ES6 export rules
  • The solution is to add a script tagType = "module"attribute

Now that we’ve solved our ES6 import module problem, we thought, now that we’ve solved this problem, what else do we need webPack to solve

At this point, if there are other partners in his JS usedCommonJSRules, that’s different

  • Export modules using commonJS rules in js/api.js
const getInfo = () = >{
    return {
        name: 'zoe'.age: 40}}module.exports = getInfo
Copy the code
  • Introduce the js/api.js file in index.js
import {sum, square} from './js/utils.js'
const getInfo = require('./js/api')

getInfo()

console.log(sum(10.20));
console.log(square(10));
Copy the code
  • At this point, the browser reported an error, because the browser does not support it eitherCommomJSThe rules

  • How do we solve this? We’re using ours, rightwebpackExecute in our project fileyarn run webpack, will generate one in our projectdistCatalog. This is where we’re storedwebpackProcessed file

  • By importing our dist/main.js in our index.html, we have resolved our import specification error in the browser

Webpack configuration

Packaging entrance

  • webpackPackaging will be found by defaultsrc/index.jsAs a package entry file
  • If you want to modify the package entry
    • The first is to append the executable file path when executing webpackyarn run webpack --entry ./src/main.js
    • The second is set through the Entry property in the WebPack configuration file

Export packaging

  • If you want to modify package export
    • The first is executionwebpack, appends the output pathyarn run webpack --output-path ./build
    • The second is set via the Output property in the WebPack configuration file

Webpack configuration filewebpack.config.js

  • Pay attention to
    • The package entry can be a relative path
    • The packing exit must be an absolute path
const path = require('path')
module.exports = {
    entry: './src/index.js'.// Pack the entry
    output: {                   // Package export
        filename: 'build.js'.// Output the file name
        path: path.resolve(__dirname, 'dist')  // Enter the file path. Note that this must be an absolute path}}Copy the code

2-3