Webpack アドバンスト ローダーarticle_html/css_WEB-ITnose

Webpack のローダーは主要な機能であり、重要な部分です。このブログでは、よく使われるローダーをカテゴリー別に解説します

1. ローダーの前処理

• css-loader は CSS 内のパス参照などの問題を処理します

• style-loader はスタイルを CSS に動的に書き込みます

• sass-loader scssコンパイラ

• less-loaderレスコンパイラ

• postcss-loader scss再処理

npm install --save -dev css-loader style-loader sass-loaderえーポストCSS- loader

Chestnut:

module: {  loaders: [    {test: //.css$/, loader: "style!css?sourceMap!postcss"},    {test: //.less$/, loader: "style!css!less|postcss"},    {test: //.scss$/, loader: "style!css!sass|postcss"}  ]}

2. ローダーの js 処理

• babel-loader

• jsx-loader

npm install --save-dev babel-core babel-preset-es2 015 バベルローダーjsx-loader

Chestnut

.babelrc

{  "presets": ["es2015","react"],  "plugins":["antd"]}

という名前の新しいファイルを作成します

webpack.config.js

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'} ]  }};

という名前の新しいファイルを作成します

3. ローダーの画像処理

• url-loader

npmインストール--save-dev url-loadr

module: {  loaders: [    {test: //.(jpg|png)$/, loader: "url?limit=8192"},  ]}

4. ローダーのファイル処理

• file-loader

npm install --save-dev file-loader

module: {  loaders: [    {      test: //.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,      loader: 'file'      },  ]}

5. ローダーの JSON 処理

• json-loader

npm install --save-dev json-loader

module: {  loaders: [    {test: //.json$/,loader: 'json'},  ]}

6. ローダーの HTML 処理

• raw-loader

npm install -- save-dev raw-loader

rrreええ