Webpack series learning – First experience

Preface: the author study webpack knowledge from the foundation to the principle to write a series, in order to review. Hope to help more friends who are learning Webpack.

Webpack: configuration file name

• The default webpack configuration file is webpack.config.js
• Configuration files can be specified via webpack –config

Webpack configuration consists of

module.exports = {
        entry: './src/index.js'.// Package the entry file
        output: './dist/main.js'.// Packaged output
        mode: 'production'./ / environment
        module: {
            rules: [ / / a loader configuration
                {
                    test: /\.txt$/,
                    use: 'raw-loader'}},plugins: [  // Plug-in configuration
            new HtmlwebpackPlugin({
                template: './src/index.html'}})]Copy the code

Environment setup: Install NodeJS and NPM

Install the NVM

• Through the curl installation: curl – o – raw.githubusercontent.com/nvm-sh/nvm/… | bash
• Through wget installation: wget – qO – raw.githubusercontent.com/nvm-sh/nvm/… | bash

Install NodeJS and NPM

• NVM install v10.15.3
• Check whether the installation is successful: node -v, NPM -v

Install Webpack and WebPack-CLI

Mkdir project CD project NPM init -y NPM install webpack webpack-cli --save-dev Check whether the installation is successful: ./node_modules/.bin/webpack -vCopy the code

Webpack small demo

Create webpack.config.js in the root directory

• Step 1: Specify input files, output files, and development environment

const path = require('path')
    module.exports = {
        entry:'./src/index.js'.output: {path: path.join(__dirname,'dist'),
            filename: 'bundle.js'
        },
        mode:'production'
    }
Copy the code

• Step 2: Create a SRC folder in the root directory

// src/hello.js
export function hello(){
      return 'hello'
 }
Copy the code

// src/index.js
import { hello } from './helloworld';
document.write(hello())
Copy the code

• Step 3: Perform webpack packaging

./node_module/.bin/webpack
Copy the code

• Step 4: After packaging, you can see dist/bundle.js.

Run Webpack through NPM Scripts

Add it to package.json

"script": {"build":"webpack"
}
Copy the code

You can run webpack with NPM run build

Principle: Module partial installation creates soft links in node_module/.bin

Next article: Introduce the basic usage of Webpack.

The above code is posted on Github

Thank you star Company three