1. Create a new folder named Project name--myapp and open the MyApp folder.
mkdir Webpack-demo && CD Webpack-demo
2. Open a command-line window in./myapp, enter NPM init , Initialize NPM, and press ENTER to use the default configuration.
At this point, the Package.json file is generated in./myapp.
3. Install Webpack and webpack-cli locally (this tool is used to run Webpack on the command line) "1"
NPM Install Webpack webpack-cli--save-dev
At this point, the Package.json content is:
./myapp is:
4. Create a project directory structure, files, and content
(1) Create SRC folder to store development source
(2) Create the Dist folder for the published code, and webpack the packaged file
(3)./MYAPP/SRC new Index.js, content:
function component () {
var element = document.createElement ('div');
// Lodash (currently introduced via a script script) is required to execute this line
element.innerHTML = _.join (['Hello', 'webpack'], '');
return element;
}
document.body.appendChild (component ());
(4)./myapp/dist new index.html, content:
<! doctype html> <html> <head> <title> React project practice </ title> <script src = "unpkg.com/lodash@4.16.6"> </ script> </ head> <body> <script src = "./ src / index.js"> </ script> </ body> </ html>
(5) Adjust the package.json file to ensure that our installation package is private and remove the main entry. This prevents accidental release of your code.
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
// "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
At this point, the project directory is:
myapp
|- package.json
|- package-lock.json
|- node_modules
|- /dist
|- index.html
|- /src
|- index.js
5. install lodash
npm install --save lodash
then，modify ./myapp/src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack1.0'], ' ');
return element;
}
document.body.appendChild(component());
modify ./myapp/dist/index.html
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <meta name = "theme-color" content = "# 000000"> <title> React project practice </ title> </ head> <body> <div id = "app"> </ div> <script src = "bundle.js"> </ script> </ body> </ html>
6. Use webpack configuration file
(1) Create a webpack.config.js file in ./myapp with the content:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
(2) Build by configuration file
Execute npx webpack --config webpack.config.js from the command line [2]
If successful, generate bundle.js file under ./myapp/dist, open ./myapp/dist/index.html, the browser displays as
7. Add npm script
Considering that CLI is not particularly convenient for running local webpack, we can set a shortcut. Add an npm script to package.json: "build": "webpack"
You can now use the npm run build command instead of the npx command.
Run npm run build from the command line
Note:
[1]. Several command forms of npm install:
npm install moduleName # Install the module to the project directory
npm install -g moduleName # -g means to install the module globally. The specific location where the disk is installed depends on the location of the npm config prefix.
npm install -save moduleName # -save means to install the module in the project directory and write dependencies in the dependencies node of the package file.
npm install -save-dev moduleName # -save-dev means to install the module in the project directory and write dependencies in the devDependencies node of the package file.
npm install moduleName command
1. Install the module into the project node_modules directory.
2. Module dependencies are not written to the devDependencies or dependencies nodes.
3. Modules are not downloaded when running npm install to initialize the project.
npm install -g moduleName command
1. Install modules globally, module packages will not be saved in the project node_modules directory.
2. Module dependencies are not written to the devDependencies or dependencies nodes.
3. Modules are not downloaded when running npm install to initialize the project.
npm install -save moduleName command
1. Install the module into the project node_modules directory.
2. Module dependencies are written to the dependencies node.
3. When you run npm install to initialize the project, the module is downloaded to the project directory.
4. When you run npm install --production or indicate that the NODE_ENV variable value is production, the module will be automatically downloaded to the node_modules directory.
npm install -save-dev moduleName command
1. Install the module into the project node_modules directory.
2. Module dependencies are written to the devDependencies node.
3. When you run npm install to initialize the project, the module is downloaded to the project directory.
4. When you run npm install --production or indicate that the NODE_ENV variable value is production, the module will not be downloaded to the node_modules directory automatically.
to sum up
The modules under the devDependencies node are used by us during development, such as gulp used in the project, compressed css, js modules. These modules are not needed after our project is deployed, so we can install them using -save-dev. Modules like express are necessary for project operation and should be installed under the dependencies node, so we should use -save to install.
[2] npx: A command introduced by npm v5.2.0 (npx). The purpose of introducing this command is to improve the developer's experience of using the command line tools provided in the package.
Example: Create a react project using create-react-app.
Old method:
npm install -g create-react-app
create-react-app my-app
npx way:
npx create-react-app my-app
This command will temporarily install the create-react-app package. After the command is completed, create-react-app will be deleted and will not appear in global. The next time you run it, it will still be temporarily installed again.
main feature:
1. Temporarily install executable dependency packages without global installation and worry about long-term pollution.
2. You can execute the commands in the dependent package, and the installation will run automatically.
3. Automatically load dependent packages in node_modules without specifying $ PATH.
4. Node version and command version can be specified, which solves the problem that different projects use different versions of commands.
reference:
www.webpackjs.com/guides/getting-started/#%E5%9F%BA%E6%9C%AC%E5%AE%89%E8%A3%85
www.jianshu.com/p/cee806439865
www.limitcode.com/detail/59a15b1a69e95702e0780249.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
