Webpack Study (i)

Before you start using Webpack, you must first install NPM. The following is the installation process for NPM

Installation:In general, node. JS is installed to automatically install NPM Test:Npm-v Upgrade:(Window System) npm install Npm-g or cnpm install Npm-g Note:In general, NPM versions follow the version of node, and when NPM is upgraded and node is not upgraded, an error occurs. Upgrade node:1, command line sudo npm install-g n2, when the command line appears the following error: Then you need to re-download the new version of the MSI installation package, and then overwrite the previous version to complete the update operation. We want to check the path of the previous installation node when overwriting, using the command where node. webpack Installation Process To Uninstall the original webpack: npm uninstall webpack -g

Reinstall Webpack:Partial Installation npm install webpack --save-dev（推荐）Local Install specific version npm install [email protected]1.31.x --save-dev Global Installation NPM install WEBPACK-G (not recommended and installed as an administrator) global install specific version NPM install [email protected]1.31.x -G View Webpack version information:Abbreviated WEBPACK-V specific NPM info Webpack Local node_modules/.bin/webpack -version webpack in Loader:

• Webpack itself does not support the packaging of css,less,sass,js,imgage and other related resources, it only provides a basic framework, in this framework with the help of relevant loader to achieve CSS,LESS,SASS,JS, Image and other related resources of the packaging work.
• Before using loader, you need to open the CMD command panel in the current directory, enter NPM init to initialize a Package.json file to hold the relevant information (there are many broken files in the Node_modules folder, So we usually do not upload this file to GitHub or compression to others, as long as we have a configured Package.json file, then others can easily in the file directory using the command NPM install to re-node_ the relevant Modules download back).
• Webpack uses the two loader of Css-loader and Style-loader to handle the packaging of CSS resources, so the two packages must be installed in the project before use:npm install Css-loader Style-loader--save-dev

Case Development Demo (case three) webpack Packaging Sass:To prevent installation failure due to wall or other file loss, we recommend installing the command cnpm install node-sass sass-loader style-loader--save-dev Case Development Demo (case four) webpack Pack Less:CNPM Install less Less-loader style-loader css-loader--save-dev Case Development Demo (case v) Webpack Packages The resources requested through the URL () method:CNPM Install Url-loader File-loader--save-dev (installed in Administrator privileges) Case development demo (case six) using Webpck-dev-server for hot flushes:Case Development Demo (case seven) use Webpack to turn the ES6 syntax es5:Case Development Demo (case eight)

Webpack Study (i)