All Loaders: https://webpack.js.org/loaders/#src/components/Sidebar/Sidebar.jsx
Description: Extract text from bundle into a file.
Link: https://github.com/webpack-contrib/extract-text-webpack-plugin
Example:
yarn add --dev extract-text-webpack-plugin style-loader css-loader
module: {
rules: [
{
test: /\.css$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: '[name]-[hash].css'
})
],Extrar o textos em um arquivo
Description: Adds CSS to the DOM by injecting a < style > tag.
Link: https://github.com/webpack-contrib/style-loader
Example:
yarn add --dev style-loader
//..
module: {
rules: [{
test: /\.css$/,
include: /src/,
use: ['style', 'raw']
// começa carregar da direita para esquerda.
// raw --> vai pegar o conteúdo e gerar uma string.
// style --> vai injetar dentro de uma <style> elemento.
}]
}Description: Replace the raw-loader
Description-pt: parseia os arquivos css (dos imports), resolve todos os '@' ou url para background.. como se fosse um 'import' no javascript ou 'require' do NodeJS.. Ou seja tenta resolver o path.
Link: https://github.com/webpack-contrib/css-loader
Description-pt: os arquivos que você usa no CSS, você pode usar o 'file-loader' para exportar em um arquivo externo.
Link https://github.com/webpack-contrib/file-loader
module: {
rules: [{
test: /\.(txt|jpg|svg|png|ico|gif|tff|woff|woff2)$/,
include: join(__dirname, 'src'),
use: {
loader: 'file-loader',
query: {
name: '[path][name]-[hash:8].[ext]'
}
}
}]
}https://github.com/webpack-contrib/url-loader
Funciona de uma forma parecida com o 'file-loader', e utilizado o 'file-loader' como fallback. Url-loader gera uma url do tipo base64
https://github.com/webpack-contrib/raw-loader
Para pegar o conteúdo interno de um arquivo. Por exemplo: arquivos .txt, .csv, etc.
https://github.com/standard/standard-loader
É um loader para Lint, que segue o estilo do JavaScript Standard Style (https://github.com/standard/standard), assim todos os programadores podem trabalhar usando o mesmo estilo de programação.
- babel-eslint
standardPreLoader: {
use: {
loader: 'standard-loader',
options: {
parser: 'babel-eslint'
// na versão do Webpack 2.0
// pare entender aquelas entrada de import()
// que importa dinamicamente
// provalmente na versão 3.0 não há necessidade desse parser.
}
}
}https://github.com/webpack-contrib/webpack-bundle-analyzer
Automaticamente cria uma pagina para visualizar os tamanhos dos arquivos.
https://github.com/jantimon/html-webpack-plugin/
Com este plugin você pode criar um templateHtml e fazer com que gere todos os arquivos javascript e css automaticamente.
Pega o 'import' da sua aplicação, e se por acaso você não estiver utilizando o código que você importou ou alguma library estiver importando algo que você não utiliza o Webpack não adiciona no builder final.
Primeira coisa que a gente precisa fazer é não deixar transformar o modulos (pq ele transformar o import e o export em required em CommonJs e modulo export... se não o Webpack não consegue fazer o 'tree shaking').. o Webpack só consegue fazer o 'tree shaking' usando o ES2015
.babelrc
{
'presents': [
['es2015', { "modules": false}], // primeiro parametro é o nome do plugin, segundo é parametros
'stage-0',
'react']
}Estão incluso os ES6, ES7, ES8...
É as ultimas feature do ES's
Se for usar o Async & Await você vai precisar desse plugin. https://tableless.com.br/entendendo-o-async-e-o-await-em-javascript/
Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals.
Example:
.babelrc
{
'presents': [
['es2015', { "modules": false}], 'stage-0', 'react'],
'plugins': [
'react-hot-loader/babel',
['transform-runtime', {
'helpers': false,
'polyfill': false,
'regenerator': true
}]
]
}