Basic configuration of Webpack

Global: CNPM i Webpack-g

Part: CNPM i webpack-d

1, in the webpack need to have export and import documents

directive: Webpack app.js Build.js

Note: Package webpack file, import file App.js, package as Build.js file

2, enter the document each project needs to use the instruction: NPM Init

All the way to the return +-y means yes

3, assume that the development directory src folder

4, assume that the production directory build folder

5. Establish webpack configuration file Config.js file

Const PATH = require (' path ') due to Webpack based nide.js can introduce node module

Const CONFIG = {} Create module

module.exports = Config Exposed module

Module.exports = (env) =>{exposure module (function) can run instruction Webpack--env hello; the env parameter can be accepted in the function, and the env parameter will be displayed at the command line hello

Console.log (ENV)

return config

}

In-Object configuration tasks:

Entrance entry: ' path ' is usually src under the app.js file, the portal file can be an array, you can introduce multiple portal files, run the order from front to back; This method can be used for single page applications

Export output:{

Path:path.join (__dirname, ' build '), export package file Comment: Path.join () method can merge paths, __dirname as relative paths, that is, the largest path before build

FileName: ' app.js ' package file name is app.js when the name is not sure, it will be packaged as a main.js file

}

The entry:{Portal file can also be set as an object to package different files; This method can be used for multi-page applications

App: './src/app.js ',
Vendor: './src/vendor.js '
},
output:{
Path:path.join (__dirname, ' build '),
FileName: ' [name]_[hash].js ' name is the name of the entry set, +hash value can be different version, as long as the file content changes, the hash value must
}

6, create an HTML file, the introduction of packaged files can test run

7. Instruction Webpack--watch

Listen: Update as soon as you change the file

8, in the script in Package.json can modify the instructions

Example: "Build": "webpack" input command NPM run build can be running Webpack

9. Instruction CNPM I html-webpack-plugin-d plug-in for development

Const Htmlwebpackplugin = require (' Html-webpack-plugin ') introduces plugins

Usage:

plugins:[

New Htmlwebpackplugin ({

Title: "Le Bee Net", the title name of the Web page

Fliename: Name of "123.html" file

})，

New Htmlwebpackplugin ({

Title: "Le Bee Net", the title name of the Web page

Fliename: "123.html", the name of the generated file

Template: './src/index.jade ' creates a file as a path file; Note: Title does not work at this time because it has a lower priority than the template

})，

New Webpack.optimize.UglifyJsPlugin ({JS code compression configuration

Compress: {
Warnings:false,
Drop_console:false
}
})

]

Using this method will automatically generate the configuration HTML, you can add parameters such as title in the instance, can generate multiple instances (multi-page application)

10. Instruction CNPM I jade-loader-d

Need to download CNPM I jade-d before use

module:{

rules:[
{
test:/\.jade$/, Test Jade.
Use: ' Jade-loader ' using Jade-loader plugin
}
]
},

11, Webpack-dev-server

Webpack complementary There is a server feature tool that can provide a hot update server for development

NPM I webpack-dev-server-g Global

NPM I webpack-dev-server-d Local

The first type of boot: Run command webpack-dev-server

The second way to start: You can configure the Devserver option in config, the execution of the command webpack OK

devserver:{

port:1234, port number
Contentbase: './build ', file location
Historyapifallback:true, update
Open:true, Auto Open
proxy:{Configuring cross-domain, server proxies

}
}

12. Instruction CNPM I url-loader html-withimg-loader-d

In Webpack, there are some things to compile files, processing files, these things are loader,loader use is in the configuration item, set the modules, set the rule value to an array in modules, put multiple matching rules in rule

Compiling HTML files (displaying pictures)

{

test:/\.html$/,
Use: ' Html-withimg-loader '
}

13. Instruction CNPM I file-loader-d

To configure picture packaging:

{

Test:/\. (png|jpe?g|svg|gif) $/,
use:[
{
Loader: ' Url-loader ',
options:{
limit:1000, file size, exceeding cannot be packed
Name: ' Images/[hash:8]. [Name]. [ext] ' file name
}
}
]
}

14. Instruction CNPM I css-loader style-loader-d

Configuration:

{

test:/\.css$/,

use:[' Style-loader ', ' Css-loader '] compile css-loader and compile Style-loader first

}

15, Configuration Scss

CNPM I scss-loader-d

Configuration:

{

test:/\.scss$/,

use:[' Style-loader ', ' css-loader ', ' Scss-loader '] compile scss-loader and compile css-loader before compiling Style-loader

}

16. Instruction CNPM I extract-text-webpack-plugin-d

Extract CSS, style, scss to package

Introduction of Const Extracttextwebpackplugin = require (' Extract-text-webpack-plugin ')

module:{

[

{

test:/\.css$/,

Use:ExtractTextWebpackPlugin.extract ({

Fallback: "Style-loader", with the last loader

Use: "Css-loader"

})

}，

{

test:/\.scss$/, SCSS Configuration

Use:ExtractTextWebpackPlugin.extract ({

Fallback: "Style-loader", with the last loader

use:["Css-loader", "Scss-loader"]

})

}

]

}

plugins:[

New Extracttextwebpackplugin ({

Fliename: ' App.css ', packaged file name (SCSS, CSS, style)

Allchunks:true

})

]

17. Instruction CNPM I jsx-loader-d

JSX configuration:

{

Test:/\. (JSX|JS)/, compile jsx or JS file

exclude:/node_modules/, except for files in Node_modules

Use: ' Jsx-loader '

}

18. React Configuration

CNPM I react react-dom-s

19, ES6 turn ES5

CNPM I [email protected]-D

CNPM I [email protected]-D

CNPM I [email protected]-D

CNPM I [email protected]-D

CNPM I [email protected]-D

The first four are ES6 compiled ES5; the latter one is compiled react

Configuration file:

{

Test:/\. (JSX|JS)/, compile jsx or JS file

exclude:/node_modules/, except for files in Node_modules

Loader: ' Babel-loader ',

query:{

presets:[' es2015 ', ' react ']

}

}

Basic configuration of Webpack