1. Initialize the NPM

npm init
Copy the code

2. Install WebPack and webPack-CLI globally

npm i webpack webpack-cli -g
Copy the code

3. Add WebPack to your package.js development dependency

npm i webpack webpack-cli -D
Copy the code

4. Create the SRC folder and create the entry file index.js

  • Index. Js file
function add(x,y) {
    return x + y;
}

console.log(add(1.2));
Copy the code

5. Run instructions

  • The development environment
webpack ./src/index.js -o ./build/built.js --mode=development
Copy the code

The command above means to package the index.js file and export it to built-in. The overall packaging environment is the development environment.

  • The production environment
webpack ./src/index.js -o ./build/built.js --mode=production
Copy the code

6. Webpack can handle JS/JSON resources

  • The following JSON file, Webpack, can be packaged
{
    "name": "justin"."age": 18
}
Copy the code

Webpack can’t handle other resources like CSS/ IMG

8. How can Webpack handle CSS style resources

  1. Create webpack.config.js at the same level as SRC instead of inside it (note: the syntax in the configuration is based on CommonJs syntax)
  2. Add the following code to webpack.config.js
// resolve the method used to concatenate absolute paths
const {resolve} = require('path')

module.exports = {
    // The entry point
    entry: './src/index.js'./ / output
    output: {
        filename: 'built.js'.// The output path __dirname refers to the absolute path of the folder above the current file
        path: resolve(__dirname,'build')},// Loader configuration
    module: {
        rules: [],}// Plugins are configured
    plugins: [{// Which files to match
            test: /\.css$/.// Which loaders are used for processing
            use: [
                // Create a style tag to add style resources from js to head
                'style-loader'.// Load the CSS file as a commonJS module into js. The content is the style string
                'css-loader']}],/ / mode
    mode: 'development'
}
Copy the code
  1. Install the relevant package files and run Webpack
npm i
npm i webpack webpack-cli -D
npm i css-loader style-loader -D
webpack
Copy the code

9. Webpack handles less style resources

  • Different loaders need to be configured for different file types
  1. Download the less – loader
npm i less-loader
Copy the code
  1. Download the less
npm i less -D
Copy the code
  1. Modify rules in module in webpack.config.js
  • Add the following object
{
    test: /\.less$/,
    use: [
        'style-loader'.'css-loader'.'less-loader']}Copy the code

Welcome to pay attention to my column, learn Webpack~~