Build a simple webPack instance
First, prepare in advance
1. Environment configuration: Node needs to be installed
2. Initialize the project: initialize the project using NPM, generate package.json file, and install webpack
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
Copy the codeAt this point, a basic WebAPck project is constructed
2. Add file content
Add index.html and index.js files to the folder created in the previous step. The directory structure is as follows:
webpack-demo
|- package.json
|- dist
|- index.html
|- /src
|- index.js
Copy the codeThe content of index. HTML is
<! Doctype HTML >< HTML >< head> <title> </head> <body> <script SRC ="main.js"></script> </body> </ HTML >Copy the codeThe contents of index.js are
import _ from 'lodash';
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
Copy the codeThe contents of package.json are
{" name ":" webpack - demo ", "version" : "1.0.0", "description" : ""," private ": true," scripts ": {" test", "echo \" Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^ 4.43.0 webpack -", "cli" : "^ 3.3.11"}, "dependencies" : {" lodash ":" ^ 4.17.15 "}}Copy the codeThree, use Webpack packaging
1. Use WebPack to package packages. After configuring the preceding files, you can use Webpack to package packages
npm install
Copy the codeYou can then use the webpack command to pack and execute
npx webpack
Copy the codeExecution Result:
Hash: C22be75961b98D37bd83 Version: webPack 4.43.0 Time: 245ms Built at: 4:27:40 PM 2020-05-15 Asset Size Chunks Chunk Names. The main js 72.1 KiB 0 [emitted] main Entrypoint main. = the main js [1] ./src/index.js 234 bytes {0} [built] [2] (webpack)/buildin/global.js 472 bytes {0} [built] [3] (webpack)/buildin/module.js 497 bytes {0} [built] + 1 hidden module WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/Copy the codeYou can now see a file named app.js generated in the dist directory, open index.html in your browser, and if all is well, you can see the Hello Webpack
2. Use the configuration file package to create a webpack.config.js file
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
Copy the codeThen perform
npx webpack --webpack.config.js
Copy the codeThe –webpack.config.js file can specify any configuration file that meets the standard. If there is a file named webpack.config.js, webPack will execute this configuration by default without specifying any parameters
3. NPM scripts can also adjust package.json scripts to add an NPM command to perform packaging
{" name ":" webpack - demo ", "version" : "1.0.0", "description" : ""," private ": true," scripts ": {" build" : "webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies" : {" webpack ":" ^ 4.43.0 ", "webpack - cli" : "^ 3.3.11"}, "dependencies" : {" lodash ":" ^ 4.17.15 "}}Copy the codeThis is done by executing the NPM command
npm run build
Copy the codeYou can also add parameters after the webpack command in SciPRts