webpack打包教程,一常用loader详解
1、打包图片
// { // test: /\.(png|jpe?g|gif)$/i, // use: [{ // loader: \'file-loader\', // options: { // name: \'[name].[ext]\', // }, // }, ], // },
打包文件用的。
占位符的这种思维可以作为我们软件架构的一部分。
2、打包图片的另一种方式
{ test: /\.(png|jpe?g|gif)$/i, use: [{ loader: \'url-loader\', options: { name: \'[name].[ext]\', limit: 2048 }, }, ], }
limit是打包文件的大小的界限。
3、打包css文件的方式。
{ test: /\.css$/i, use: [\'style-loader\', \'css-loader\'], }
4、打包sass,scss
首先在webpack.config.js
{ test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings \'style-loader\', // Translates CSS into CommonJS \'css-loader\', // Compiles Sass to CSS \'sass-loader\', //用于形成浏览器的前缀 \'postcss-loader\' ], },
然后在跟目录下新建文件。
postcss.config.js
然后输入下面的内容
module.exports = { plugins: [require("autoprefixer")] }
其中postcss和autoprefixer的是兼容性的考虑。
5、对于两个文件有引用的情况。
{ test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings \'style-loader\', // Translates CSS into CommonJS { loader: "css-loader", options: { importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader }, }, // Compiles Sass to CSS \'sass-loader\', //用于形成浏览器的前缀 \'postcss-loader\' ], },
6、对于字体文件的引用。
{ test: /\.(eot||ttf|woff|svg)$/i, use: [{ loader: \'file-loader\' }, ], }