webpack学习笔记（一）

目录


认识webpack

webpack是什么？

webpack是一个现代的JavaScript应用的静态模块打包工具

前端模块化

webpack可以处理模块间的依赖关系
万物皆模块

和grunt/gulp的对比

grunt/gulp的核心是Task
一系列的task
前端自动化任务管理工具
基本没有模块化的概念

grunt/gulp强调前端流程的自动化，模块化不是它的核心
webpack强调模块化开发管理，而文件压缩合并、预处理等功能，是附带的

webpack的安装

webpack的正常运行依赖于node运行环境
node环境需要正常运行，必须依赖各种包
npm工具帮助我们管理node依赖的各种包

> node -v
v10.13.0
> npm install webpack@3.6.0 -g
> webpack --version
3.6.0

webpack的起步

# 进行打包
webpack ./src/main.js ./dist/bundle.js

webpack的配置

webpack.config.js

const path = require('path') //npm init -y
module.exports = {
    entry: './src/main.js', // 入口
    output: { // 出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    }
}

package.json

"build": "webpack"

// npm run build 进行完上面的配置后进行打包

本地局部安装webpack

npm install webpack@3.6.0 --save-dev

loader的使用

loader是什么？
是webpack中一个非常核心的概念

loader有什么用？
帮助我们将一些文件进行转换或加载

loader中文文档

css文件的处理

安装css-loader

npm install --save-dev css-loader@2.0.2

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

安装style-loader

npm install --save-dev style-loader@0.23.1

webpack.config.js

module.exports =  {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

可能会报错

You may need an appropriate loader to handle this file type.
注意查看css-loader的版本

less文件的处理

安装less-loader和less

npm install --save-dev less-loader@4.1.0 less@3.9.0

webpack.config.js

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

图片文件的处理

安装url-loader

npm install --save-dev url-loader@1.1.2

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      }
    ]
  }
}

url-loader对于处理的有大小的限制
file-loader则没有

安装file-loader

npm install --save-dev file-loader@3.0.1

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
                name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

ES6转ES5的babel

# 安装babel对应的loader
npm install babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_componts)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
                presets: ['es2015']
            }
          }
        ]
      }
    ]
  }
}

配置完后，重新打包，可以看到打包出的文件语法变成ES5，以提高兼容型

posted @ 2021-04-26 22:17  fengjielin  阅读(34)  评论(0)    收藏  举报