Turn:
Using Webpack for ES6 development
Some digression
The original intention of using Webpack is actually to use React.
When learning React, there is always a problem: Since the component is modular, such as a jsx file corresponding to a component, this file contains the HTML and JS of this component, but where should his style be written? The online tutorials are written in the Jsx file, defined by variables, or written directly into the global style. It is not possible to define pseudo-elements through variable write, and it is uncomfortable to write a bunch of styles in JS, but it is not fit for the concept of assembly in the global.
Check the data when found a CSS modules concept, detailed can refer to this article. Of course, CSS does not natively support this concept, but in Webpack, it css-loader
can be easily used by one. webpack+React
also very popular, so I began to learn webpack.
Start one, create a directory
Simply create the directory structure as follows:
/es6-- main.js-- Person.jsindex.htmlwebpack.config.js
Es6 inside the store is the ES6 style code, main.js
is the entry file, index.html
is the home page, webpack.config.js
is the Webpack configuration file.
Second, installation Webpack
The first thing is to ensure that Nodejs is installed and then installed with NPM:
npm install webpack -g
Third, the configuration
Open webpack.config.js
, edit as follows:
var path = require(‘path‘);module.exports = { entry: "./es6/main.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: path.join(__dirname, ‘es6‘), loader: ‘babel-loader‘, query: { presets: [‘es2015‘] } } ] }}
module.exports
The exported object is the Webpack configuration object, where:
entry
It's a portal file.
output
is the output file, which filename
is given here bundle.js
, that is, when Webpack runs out, it will generate a bundle.js
file
loaders
is used to all the loaders, in the gulp we are using some of the gulp plug-ins such as, and gulp-rename
gulp-concat
so on, similar in Webpack, using a variety of loaders
, detailed loaders list here.
The meaning of more configuration properties is here.
Here we use a called babel-loader
loader, in the use of Gulp for ES6 development has been introduced, we are using Babel to ES6 style code to convert, so in query also used the es2015
transcoding rules. This loader is installed below.
Iv. installation of loaders installation Babel-loader
npm install babel-loader --save-dev
Install transcoding rules
npm install babel-preset-es2015 --save-dev
Now that the preparation is done, you can write your code below.
Five, Code/es6/main.js
import Person from ‘./Person.js‘;let p = new Person(‘张三‘, 20);document.write(p.say());
/es6/person.js
class Person{ constructor(name, age){ this.name = name; this.age = age; } say(){ return `我是${this.name},我今年${this.age}岁了。`; }}export default Person;
Index.html
Here you can refer directly to it bundle.js
.
<! DOCTYPE html><html><head> <meta charset="UTF-8" > <title>document </title></head><body> <script src="Bundle.js" ></script></body></html>
Vi.. Operation
Because there is a webpack.config.js
configuration file, so only need to enter Webpack to run, Webpack will automatically execute the contents of the configuration file:
webpack
For large projects, it is possible that Webpack will run for a long time, so you can add a progress bar for easy viewing:
webpack --progress --colors
In gulp, watch can be used to monitor file changes, while in Webpack, you only need to add one parameter:
webpack --watch
So, we can use the following command to run:
webpack --progress --colors --watch
Using Webpack for ES6 development