webpack学习打包静态资源，file-loader, url-loader,css-loader

安装webpack

npm install webpack webpack-cli -D

执行webpack命令

npx webpack

npx命令表示执行项目中node_modules中webpack的命令，否则直接执行webpack，则需要全局安装webpack。全局安装webpack如果是多个项目时，webpack版本不一致，不利于维护。

也可以使用npm script来执行命令。在package.json中，添加

 "scripts": {
    "build": "webpack"
  },

执行npm run build,这就等同于npx webpack，即先在当前项目中查找webpack命令。

file-loader

npm install --save-dev file-loader

用法

import img from 'avatar.jpg'

webpack.config.js

const path = require('path')
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'file-loader',
            }
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

生成文件6f14709982247545b2ea0c69175088f9.jpg，输出到目录dist/中，还可以增加其它配置项：

const path = require('path')
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                        //  增加6位数hash: '[name]_[hash:6].[ext]',
                     outputPath: 'images/',
                }
            }
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

详细配置可查看webpack官方文档file-loader

url-loader

npm install --save-dev url-loader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。这样针对比较小的图片文件直接打包到js文件，可以减少http请求。避免limit设置过大或者不设置限制，导致js文件过大，加载时间过长，也是不合理的。

module: {
      rules: [{
           test: /\.(png|jpg|gif)$/,
           use: {
               loader: 'url-loader',
               options: {
                   name: '[name]_[hash:6].[ext]',
                   outputPath: 'images/',
                   limit: 10240,  // 10kb
               }
           }
       }]
   }

加载CSS文件 

npm install --save-dev url-loader

使用

    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash:6].[ext]',
                    outputPath: 'images/',
                    limit: 10240,  // 10kb
                }
            }
        }, {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },

css-loader会分析几个css文件间的关系，最终把这些css文件合并成一段css，style-loader的作用是在获得css-loader得到的内容后，把这段内容挂在到head部分，

loader的执行是有顺序的，从下到上，从右到左，所以先使用css-loader,然后使用style-loader.

sass-loader

npm install sass-loader node-sass webpack --save-dev

postcss-loader

自动添加厂商前缀，需要使用autoprefixer

npm install postcss-loader autoprefixer -D

 webpack.config.js添加postcss-loader，注意loader的顺序，需要在style-loader, css-loader之后，但是要在其它预处理加载程序（如sass|less|stylus-loader）之前使用。

    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash:6].[ext]',
                    outputPath: 'images/',
                    limit: 10240,  // 10kb
                }
            }
        }, {
            test: /\.scss$/,
            use: [
                'style-loader', 
                // importLoaders: scss文件里面的@import 引入的文件也需要走sass-loader, postcss-loader这两个loader，否则直接css-loader和style-loader
                { loader: 'css-loader', 
                options: { 
                    importLoaders: 2,
                    modules: true,  // 开启css模块化
                } },  
                'postcss-loader',
                'sass-loader', 
            ]
        }]
    },

第一步：

根目录添加postcss.config.js文件，

module.exports = {
  plugins: [require("autoprefixer")],
};

第二步：

package.json添加

"browserslist": [
    "defaults",
     "not ie < 11",
     "last 2 versions",
     "> 1%",
     "iOS 7",
     "last 3 iOS versions"
   ],

效果图

打包字体文件 

先从iconfont图表库下载一套字体文件，

复制字体文件到项目目录中

iconfont.css中修改字体文件路径

再引入iconfont.css。现在执行npm run build打包会报错，这是因为webpack不知道字体文件应该用何种方式打包，所以我们需要配置相应的字体文件打包方式。

npm install file-loader -D

webpack.config.json中增加配置

{
            test: /\.(eot|svg|ttf|woff)$/,
            use: {
                loader: 'file-loader',
            }
        }

 测试字体

    icon.innerHTML = '<span class="iconfont iconlisten"></span>'

执行npm run build，发现依然报错，我们需要把iconfont.css文件修改未iconfont.scss，然后再次打包，可以看到字体文件加载成功。

 

 demo地址