Warning
1. NetCore 5
2. Need NetCore 5 SDK
среда, 30 декабря 2020 г.
Render, Html,Express
https://codeforgeek.com/render-html-file-expressjs/#step-3-render-html-in-express
D:\VC\WebNode\Express\expressapp
node app.js
вторник, 29 декабря 2020 г.
понедельник, 28 декабря 2020 г.
Express, javascript, fech(), json, project
1. D:\VC\WebNode\Express\expressapp
fetch Todo[] from https://jsonplaceholder.typicode.com/todos
With Bootstap layouts
2. D:\VC\WebNode\Express\getjson
2.1 Work from IIS http://localhost/jsonfetch/
index.js load with index.html
воскресенье, 27 декабря 2020 г.
пятница, 25 декабря 2020 г.
Webpack, Installation, Commands
https://webpack.js.org/guides/getting-started/
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-devproject
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.jspackage.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
- "main": "index.js",
+ "private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
}
}First we'll tweak our directory structure slightly, separating the "source" code (./src) from our "distribution" code (./dist). The "source" code is the code that we'll write and edit. The "distribution" code is the minimized and optimized output of our build process that will eventually be loaded in the browser. Tweak the directory structure as follows:
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.jsTo bundle the lodash dependency with index.js, we'll need to install the library locally:
npm install --save lodashWhen installing a package that will be bundled into your production bundle, you should use npm install --save. If you're installing a package for development purposes (e.g. a linter, testing libraries, etc.) then you should use npm install --save-dev. More information can be found in the npm documentation.
src/index.js
+import _ from 'lodash';
+
function component() {
const element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());dist/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Getting Started</title> - <script src="https://unpkg.com/lodash@4.17.20"></script> </head> <body> - <script src="./src/index.js"></script>
+ <script src="main.js"></script></body> </html>
With that said, let's run npx webpack, which will take our script at src/index.js as the entry point, and will generate dist/main.js as the output. The npx command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package we installed in the beginning:
$ npx webpack[webpack-cli] Compilation finished asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset runtime modules 1000 bytes 5 modules cacheable modules 530 KiB ./src/index.js 257 bytes [built] [code generated] ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] webpack 5.4.0 compiled successfully in 1851 ms
Open index.html from the dist directory in your browser and, if everything went right, you should see the following text: 'Hello webpack'.
Using a Configuration
As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file. This is much more efficient than having to manually type in a lot of commands in the terminal, so let's create one:
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.jswebpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};Now, let's run the build again but instead using our new configuration file:
$ npx webpack --config webpack.config.js[webpack-cli] Compilation finished asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset runtime modules 1000 bytes 5 modules cacheable modules 530 KiB ./src/index.js 257 bytes [built] [code generated] ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] webpack 5.4.0 compiled successfully in 1934 ms
NPM Scripts
Given it's not particularly fun to run a local copy of webpack from the CLI, we can set up a little shortcut. Let's adjust our package.json by adding an npm script:
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
}Now the npm run build command can be used in place of the npx command we used earlier. Note that within scripts we can reference locally installed npm packages by name the same way we did with npx. This convention is the standard in most npm-based projects because it allows all contributors to use the same set of common scripts.
Now run the following command and see if your script alias works:
$ npm run build... [webpack-cli] Compilation finished asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset runtime modules 1000 bytes 5 modules cacheable modules 530 KiB ./src/index.js 257 bytes [built] [code generated] ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] webpack 5.4.0 compiled successfully in 1940 ms
Custom parameters can be passed to webpack by adding two dashes between the
npm run buildcommand and your parameters, e.g.npm run build -- --color
Conclusion
Now that you have a basic build together you should move on to the next guide Asset Management to learn how to manage assets like images and fonts with webpack. At this point, your project should look like this:
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- main.js
|- index.html
|- /src
|- index.js
|- /node_modulesIf you're using npm 5+, you'll probably also see a
package-lock.jsonfile in your directory.
Подписаться на:
Комментарии (Atom)