Webpack's loaders is a major feature and an important part of it. This blog I will be classified to explain some of the commonly used Laoder
First, the pretreatment of loaders
Css-loader handling issues such as path references in CSS
Style-loader dynamically writing styles to CSS
Sass-loader Scss Compiler
Less-loader less compiler
Postcss-loader Scss re-processing
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
Chestnuts:
module: { loaders: [ {test: /\.css$/, loader: "style!css?sourceMap!postcss"}, {test: /\.less$/, loader: "style!css!less|postcss"}, {test: /\.scss$/, loader: "style!css!sass|postcss"} ]}
Second, loaders's JS processing
npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader
Chestnuts
Create a new .babelrc
file with a name
{ "presets": ["es2015","react"], "plugins":["antd"]}
Create a new name for the webpack.config.js
file
module.exports ={ entry: './entry.js ', output: {path: __dirname, filename: ' bundle.js '}, module: {loaders: [{test: /\.js$/, loader: "Babel", exclude: /node_modules/}, {test: /\.jsx$/, loader: "Jsx-loader"} {test: /.css$/, loader: ' Style!css '}]}};
Third, the picture processing of loaders
npm install --save-dev url-loadr
module: { loaders: [ {test: /\.(jpg|png)$/, loader: "url?limit=8192"}, ]}
Iv. document processing of loaders
npm install --save-dev file-loader
module: { loaders: [ { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: ‘file‘ }, ]}
V. Loaders's JSON processing
npm install --save-dev json-loader
module: { loaders: [ {test: /\.json$/,loader: ‘json‘}, ]}
Vi. HTML processing of loaders
npm install --save-dev raw-loader
module: { loaders: [ { test: /\.html$/,loader: ‘raw‘}, ]}
The loader chapter of Webpack Advanced