Webpack Study Notes

Preliminary knowledge of Webpack and environment construction in 1>webpack-
NPM install-g webpack Global Installation
NPM INSTALL-G Webpack-dev-server Prepare a server and listen
Webpack < need to package files > bundle.js (where to go) package files
Webpack < need to package files > bundle.js (where to go)--watch continuously listen, package files
Webpack corresponds to Model.exports and require () required when using a custom file introduction./File Location
The system comes with no need.
2>webpack-use of third-party libraries
Use a third-party plugin to use jquery as an example
CNPM install jquery--save--Download First
Let $ =require ("jquery")--Call again

Static file modularity with CSS as an example
NPM Install Css-loader Style-loader--save-dev
It's good to introduce files directly after downloading.
Single File--require ('!style-loder!css-loder!. /style.css ')
Overall file--Configure the Webpack entry file Webpack.config.js (must be the name, otherwise not found)
Content:
Module.exports = {
Entry file
Entry: './app.js ',
After the file
Output: {
Path: __dirname + '/dist ',
FileName: "Bundle.js"
},
Plugins or loaders that need to be relied upon
Module: {
Loaders: [
{test:/\.css$/,loader: "Style-loader!css-loader"}
Regular all CSS will be modular by the loader
]
}
}
After that, the package command can be used directly webpack will find the portal file
3>webpack-Building a server

Using Webpack-dev-server
NPM install-g Webpack-dev-server
How to start a project using Package.json
In a project, the Package.json file controls how the project is built
We can modify him to achieve self-control.
"Scripts": {
"Start": "Webpack-dev-server--entry/app.js--output-filename./bundle.js",//Let the project in
Server-side running the portal file, export file path to be correct thereafter can be started by the NPM Run Start command
"Build": "Webpack"//Build project NPM Run Build
},

The ES6 syntax in the project is not compatible with all browsers, so we convert Es6 to ES5 by Babel
Installation:
NPM Install Babel-core Babel-loader babel-preset-es2015
Three modules are Babel core plug-in loader requires precompiled language
After that we need to edit in Webpack's Portal file Webpack.config.js
Module: {
Loaders: [
{
Test:/\.js$/,//All JS files
Loader: "Babel-loader",//compiling with loader
Exclude:/node_modules/,//excluded files
Query: {
Pressets: ["es2015"]//Querying precompiled files
}
},
]
}

Webpack Study Notes