webpack erection - installation webpack

Foreword

webpack is an open source front-end packaging tools. webpack provides a modular development approach is the lack of front-end development, all kinds of static resources as modules, and generates optimized code from it too. (Wiki)

npm initialization

First into the project directory, perform initialization npm

1

nPM heat

Installation webpack

Official documents mentioned do not recommend installing in the global webpack, this will your project webpack locked to a specific version, and use different versions of webpack project may cause the build to fail.
In the project directory, using the local installation

1	npm install --save-dev webpack webpack-cli

Configuration webpack

In the new project directory srcfolder, create a webpack entry point main.js, first write test code

1	console.log('webpack test');

Then add webpack profile in the root directory , webpack.config.jswrite a basic set

1 2 3 4 5 6 7 8 9

const path = require('path'); = {module.exports entry: './src/main.js', // entry point output: {// output point filename: 'main.bundle.js', // output file path: path.resolve (__ dirname , 'dist') // path } };

Settings package.jsoncan be used to execute instructions npm compiled
in package.jsonthe scriptnew custom name, to bring back webpack, after the input of the following examples can be packaged

1	npm run dev

After the introduction of its archive

In the distnew folder within a index.htmlfile, and the introduction of the webpack its archive

to re-open a new vscode, open the dist folder, open a web server will be able to consolesee the main.js　code written in a.

Original: Big Box  webpack erection - installation webpack