Use of Webpack

Tag: Log is return install failed pre Build blog new load

Good memory is better than bad writing, bad writing is better than practice.
Essentially, Webpack is a static module wrapper for a modern JavaScript application (module bundler) . When webpack processes an application, it constructs a dependency graph (dependency graph) recursively, which contains each module that the application requires, and then packages all of them into one or more bundles.

　　 installation

You should first make sure that your computer has node installed and then use NPM to install it globally. Input in terminal (-G = global installation):　

NPM Install Webpack-g

These operations are fine under Windows, but there may be a problem with the Mac.

Cause analysis: In the Mac under the dependency package to write to the system in the important folder, because there is no root permission to get the write failed, causing the installation to fail.

One more step for Mac is that the terminal performs the following command first

$ sudo-s

After execution will appear the small key, you enter what will not show up, directly enter your power-on password and then in the return on it.

Get the root to install Webpack.

Wait for the installation, enter WEBPACK-V on the terminal if the Webpack version instructions are displayed to install successfully.　

preparation for the formal use of Webpack

　 Create a new Webpack-text project.

use npm init the command to automatically create this Package.json file. Enter in the terminal

NPM Init

　　Follow the instructions returned by the terminal to fill in the project name, project description, author and other information. will see the Package.json in the project.

　　 official use of Webpack　　

single JS file packaging

Create a new show.js and a index.html

Show.js

Single JS file package document.write ("123")

Index.html

<! DOCTYPE html>
In terminal input (where show.js is a portal file, Bundle.js is an export file)
Webpack Show.js Bundle.js
After execution, you can see that the bundle.js was generated, stating that the package was successful.
　　Multiple JS file packaging (to receive STR exposed items)
　　Create a new Str.js file, exposing what needs to be exposed through module.exports, the contents of which can be exposed are strings, JSON objects, functions
Expose the content//Module.exports = "Tomorrow will be fine ~"//Pass JSON object//var JSON = {//     str: "123"//};//Module.exports = json;//transfer function funct ION fn (value) {    return value;} Module.exports = fn;
　　and receive the exposed content through show.js.
Multiple JS file packaging (to receive the str exposure)//document.write (Require ("./str.js")//Receive JSON object//var JSON = require ("./str.js");// document.write (JSON.STR)//receive function var Fnstr = require ("./str.js");
document.write (Fnstr ("<div>234</div>"));
　　In terminal input (where show.js is a portal file, Bundle.js is an export file)
Webpack Show.js Bundle.js
　　Packaging style Files　　
　　Pass after installing the loader loader, you can package the static style files together into the Bundle.js file. Install the loader with a command. 
Sodu npm Install Css-loader Style-loader
　　Wait for the installation to succeed, you will find that the project has a node-modules file, open the Package.json file, you will find more dependencies information.
　　Create a new Style.css file
div{    background:red;    Color: #fff;    Text-align:center;}
　　In the Portal file Show.js loading style.css, in the Show.js ( Note: must first load style-loader, and then load into Css-loader);
Introduce static CSS to require ("!style-loader!css-loader!.. /css/style.css ")
　Run at Terminal
Webpack Show.js Bundle.js
　　through configuration file Packaging
 When compiling manually, you can add some recurring actions to the configuration file, reduce the number of handwritten code during compilation, and build automated tools. 
Create a new configuration file Webpack.config.js under the project. Write the configuration item on the configuration file.
The project directory is as follows:
　　
　Configuration Items
Run at Terminal
Webpack
　　Another way to compile
　　Inside the Package.json inside the scripts input
"Build": "Webpack"
　　Run at terminal (equivalent to running webpack above)
NPM Run Build
　　Install third-party libraries
　　To install jquery as an example
Run at terminal (--save-dev saved in Package.json)
sudo npm install jquery--save-dev
　　After the installation is successful, you will see it in the Packjson.json
　　
　　Introduced in the Portal file Show.js
var $ = require ("jquery")
　　Deploy projects to the service side with the packaging tools
　　By installing
Run the Webpack-dev-server module at the terminal, you can package the project to the server, and you can specify the port, as well as configure the start command.
sudo npm webpack-dev-server--save-dev
　　After installation, you can see the Package.json
　　
　　Configure start in Package.json's scripts
"Start": "Webpack-dev-server--entry/src/js/show.js--output-filename./dist/bundle.js",
   Start the server, edit the terminal first
NPM Run Build
   Then start the server (the default port is 8080)
NPM start
   If you want to modify the port, it is configured in the configuration file webpack.config.js devserver
　　
　　Specifically (configuration of the Package.json file)
  
  Automate automatic file packaging
  After configuring the server, add Watch Monitor in Build
"Build": "Webpack--watch",
  Automatic detection can be implemented.  
Use of Webpack