Based on this, the development provides the support of webpack, so that the development can follow the rapid changes of the front end in time, ensure that the project development is in line with the newer technology, and improve the development efficiency.
1. Install nodeJS
https://nodejs.org/en/
nodeJS is the basic operating environment, you can download the latest version by default, and provide support for npm 2. The npm init process of the
initialization project can fill in the corresponding configuration information as needed, and it will be generated by default package.json file (in which the follow-up content of babel in devDependencies is explained)
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "haiyupeter",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1"
}
}
The scripts in this file are very important, you can directly use npm test to run the test command in scripts directly
(1) Add "start": "webpack-dev-server --devtool eval --progress --colors --inline"
can be used npm start starts the server directly to ensure that webpack-dev-server starts the default webpack.config.js. If the name "start" is not used, you need to add npm run ***
(2) and then add
"build-common": "webpack- dev-server --devtool eval --progress --colors --inline --config webpack.common.config.js"
// Specify the configuration file as webpack.common.config.js, so that multiple tasks can be executed at the same time , to ensure that multiple tasks are performed at the same time, and different types of files can be generated as needed
(3) The parameter --content-base ./common-build is used to specify the base directory of the current webpack, and can process files in different directories at the same time, so To achieve this, you only need to configure and install webpack-related configurations in one project, and you do not need to install multiple
3. Example project directory webpack-test
/es6
-- main.js
-- Person.js
index.html
webpack.config. js
4. Install webpack
npm install -g cnpm --registry=https://registry.npm.taobao.org
// Use Taobao's mirror cnpm to proxy some plug-ins on the network to China, recall the download speed
cnpm install webpack -g // global Load webpack
cnpm install webpack-dev-server -g // load server globally, support real-time update
cnpm install babel-core --save-dev // development environment babel-core
cnpm install babel-loader --save-dev // development Environment babel-loader
cnpm install babel-preset-es2015 --save-dev // Install ES2015 transcoding rules
cnpm install webpack --save-dev // Generally, webpack is used, and the development environment is also dependent, otherwise require('webpack ') will report an error
. For the introduction of babel, please refer to Ruan Yifeng's article: http://www.ruanyifeng.com/blog/2016/01/babel.html
5. webpack configuration file webpack.config.js
var path = require('path');
module.exports = {
entry: "./es6/main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
//Set the port number of the developer tool, if not set, the default is port 8080
devServer:
inline: true,
port: 8181
},
module: {
loaders: [
{
test: path.join(__dirname, 'es6'),
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
}
(1) entry entry file: It can provide the possibility of packaging multiple files for an array object.
Such as {
"index": ["main1.js", "main2.js", "main3.js"],
"goods": ["goods1.js", "goods2.js", "goods3.js"]
}
(2) output output file: [name]/[name].js // It can be selected as a common generated name, so that the correctness of the referenced file can be guaranteed.
Loaders are loaders, and loaders can refer to the link http://webpack .github.io/docs/list-of-loaders.html
(3) devServer is the development environment and port settings of the webpack-dev-server server
6. Detailed explanation of the contents of each file
Person.js
class Person{
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
return 'I am' + this.name + ', I am ' + this.age + ' this year. ';
}
}
export default Person;
main.js
import Person from './Person.js';
let p = new Person('Zhang San 3', 20);
document.write(p.say());
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test es6</title> </head> <body> <script src="bundle.js"></script> </body> </html>
7. Add main2.js to the multi-file example
import Person from './Person.js';
let p = new Person('Li Si', 20);
document.write(p.say());
Modify webpack.config.js
var path = require('path');
module.exports = {
entry: {
"main": ["./es6/main.js"],
"main2": ["./es6/main2.js"]
},
output: {
path: __dirname,
filename: "[name].js"
},
module: {
loaders: [
{
test: path.join(__dirname, 'es6'),
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
}
At this point, type main.js and main2.js (output according to the key of entry)
index.html is quoted as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test es6</title> </head> <body> <script src="main.js"></script> <script src="main2.js"></script> </body> </html>
8. Install plug-ins to support directory construction
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
// filename: "vendor.js"
// (give chunk a different name)
minChunks: Infinity
// (As there are more and more entry chunks,
// This configuration ensures that no other modules will be packaged into the vendor chunk)
}),
new webpack.BannerPlugin('This processing is dedicated to annotation'),
// start compression
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
CommonsChunkPlugin is used to extract common JS to ensure the correctness of JS. This plug -in can be used to generate multiple common files
. The development environment and the formal environment are separated to ensure that the files in the formal environment are the smallest and the most efficient; while in the test environment, the files are maximized and easy to debug . Reference article: http://www.runoob.com/w3cnote/webpack- tutorial.html https://www.cnblogs.com/vajoy/p/4650467.html https://segmentfault.com/a/1190000003970448 http://www.jianshu.com/p/42e11515c10f http://www. jianshu.com/p/a64735eb0e2b http://web.jobbole.com/86984/