1. Plug-in
1. Automatically complete the css3 prefix
autoprefixer
The official said this: Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website, which means it is a plug-in that automatically detects compatibility and adds a kernel prefix to each browser.
Take a chestnut: the latest elastic box model flux
Actual code:
:fullscreen a {
display: flex
}
After automatic plug-in replenishment
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
The effect is obvious. We can focus more on CSS layout and beautification without spending too much effort writing the same external code and adding different prefixes, which also reduces redundant code.
How to use:
cnpm install --save-dev autoprefixer postcss-loader
var autoprefixer = require('autoprefixer');
={
//I won't write other configurations here
module:{
loaders:[
{
test:/\.css$/,
// Just add a postcss loader to the original basis loaders:['style-loader','css-loader','postcss-loader']
}
]
},
postcss:[autoprefixer({browsers:['last 2 versions']})]
}
2. Automatically generate html plug-in
html-webpack-plugin
cnpm install html-webpack-plugin --save-dev
//
var HtmlWebpackPlugin = require('html-webpack-plugin');
={
entry:'./',
output:{
path:__dirname+'/dist',
filename:''
}
plugins:[
new HtmlWebpackPlugin()
]
}
Function: It will automatically generate a
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script src=""></script> </body> </html>
Other configuration parameters:
{
entry: '',
output: {
path: 'dist',
filename: ''
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: '',
template:'',
inject: 'body',
favicon:'./images/',
minify:true,
hash:true,
cache:false,
showErrors:false,
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "" ]
},
xhtml:false
})
]
}
--- --- <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title><%= %></title> </head> <body> </body> </html>
effect:
- title: Set the title name
- filename: Set the file name of this html
- template: The path to the module to be used
- inject: after injecting the template to which tag 'body',
- favicon: Add a favicon to html './images/',
- minify: Whether to compress {...} | false (the latest API changes, it turns out to be ture|false Thanks @onmi for correcting)
- hash: whether hash hash true false ,
- cache: Whether to cache,
- showErrors: Whether to display an error,
- chunks: I don't understand very much at the moment
- xhtml: Whether to automatically graduate tags? Default false
3. Extract style plug-in
extract-text-webpack-plugin
The official website explains Extract text from bundle into a file. Add extra data to the compiled file
var ExtractTextPlugin = require("extract-text-webpack-plugin");
= {
module: {
loaders: [
{ test: /\.css$/, loader: ("style-loader", "css-loader") }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/public/',
inject: 'body'
}),
new ExtractTextPlugin("[name].[hash].css")
]
}
Note: Put the css on the body
4. Copy the resource plugin
copy-webpack-plugin
The official explanation is Copy files and directories in webpack, copy files and folders in webpack
cnpm install --save-dev copy-webpack-plugin
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]),
Function: Copy all the contents in public to the compiled directory
| parameter | effect | Other Instructions |
|---|---|---|
| from | Define the source directory to copy | from: __dirname + '/src/public' |
| to | Define the target directory to bake the pan | from: __dirname + '/dist' |
| toType | fileordir | Optional, default is file |
| force | Force overwrite previous plugins | Optional Default false |
| context | Don't know the function | Optional Default Base context Available specific context |
| flatten | Only copy files regardless of folders | Default is false |
| ignore | Ignore copying the specified file | Can be matched with fuzzy |
5. Global mount plug-in
[webpack built-in plugin]
new ({
$: "jquery",
jQuery: "jquery",
"": "jquery"
}))
new (),
new (),
new (),
new ('')
Function: Correspond to the above 5
- When the module uses these variables, wepback will be loaded automatically. (Different from window mount, thanks to @lihuanghe121 for correcting)
- No error plug-in displayed
- Find equal or approximate modules to avoid duplicate modules in the final generated file
- ugliness js to obfuscate the code
- Plugin for extracting public code
2. A complete chestnut
'use strict';
// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = .npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
= function makeWebpackConfig() {
var config = {};
= isTest ? {} : {
app: './src/app/'
};
= isTest ? {} : {
// Absolute output directory
path: __dirname + '/dist',
publicPath: isProd ? '/' : 'http://localhost:8080/',
filename: isProd ? '[name].[hash].js' : '[name].',
chunkFilename: isProd ? '[name].[hash].js' : '[name].'
};
if (isTest) {
= 'inline-source-map';
} else if (isProd) {
= 'source-map';
} else {
= 'eval-source-map';
}
= {
preLoaders: [],
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.css/,
loader: isTest ? 'null' : ('style', 'css?sourceMap!postcss')
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file'
}, {
test: /\.json$/,
loader: 'json'
}, {
test: /\.scss/,
loader: 'style!css!sass'
}, {
test: /\.html$/,
loader: 'raw'
}]
};
if (isTest) {
({
test: /\.js$/,
exclude: [
/node_modules/,
/\.spec\.js$/
],
loader: 'isparta-instrumenter'
})
}
= [
autoprefixer({
browsers: ['last 2 version']
})
];
= [];
if (!isTest) {
(
new HtmlWebpackPlugin({
template: './src/public/',
inject: 'body'
}),
new ExtractTextPlugin('[name].[hash].css', {disable: !isProd})
)
}
if (isProd) {
(
new (),
new (),
new (),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]),
new ({
$: "jquery",
jQuery: "jquery",
"": "jquery"
}))
}
= {
contentBase: './src/public',
stats: 'minimal'
};
return config;
}();
3. Debugging skills
if (isTest) {
= 'inline-source-map';
}
Function: Use source-map to see the source code during debugging, which is convenient for checking errors
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.