webpack study notes (1)

webpack study notes (1)

 

This note study reference: http://www.runoob.com/w3cnote/webpack-tutorial.html

 

Project structure:

 

//Use the webpack command to package js
//webpack w1.js buundle.js
//document.write("It works.");

//Use the webpack command to package the dependent js
//webpack w1.js buundle.js
// document.write(require("./w2.js"));


//Use webpack loader to process and convert non-js modules
//For example: to add css files in the application, you need to use css-loader and style-loader, css-loader will traverse the css files, and then find the url() expression to process them
//style-loader will insert the original css code into a style tag of the page number
//安装css-loader、style-loader ； npm css-loader style-loader
// require("!style-loader!css-loader!./style.css");
// document.write(require("./w2.js"));
//Note: The above require method is equivalent to require("./style.css"); and execute the command: webpack w1.js bundle.js --module-bind 'css=style-loader!css-loader'


//Use the webpack command directly without any parameters to package to the output according to the webpack.config.js configuration!
// require("./style.css");
// document.write(require("./w2.js"));
// document.write('<br />111111');
//Plugins, mainly used for some impetuous operations that loader can't complete, webpack also comes with some plugins

//webpack common command options
//1.webpack --process --colors Make webpack output content treatment progress and color
//2.webpack --process --colors --watch turn on monitoring mode


//webpack-dev-server uses http service of express and nodejs