专栏首页前端导学webpack4 入门

webpack4 入门

webpack模块打包

npm init
touch index.html
touch index.js
touch header.js
touch content.js
touch sidebar.js


npm install webpack-cli --save-dev
npm install webpack --save
npx webpack index.js 

源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3

用webpack编译index.js文件生成目录dist和main.js文件

使用CommonJS的模块引入方式打包源码 https://github.com/lilugirl/learn-webpack4/tree/master/4

常用命令

全局安装webpack npm install webpack webpack-cli -g

卸载全局webpack npm uninstall webpack webpack-cli -g

查看webpack版本 npm info webpack

查看当前目录下webpck的版本 npx webpack -v

webpack配置文件

在项目中创建webpack.config.js文件 ,内容如下

touch webpack.config.js

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

执行命令 npx webpack webpack会根据配置文件自动找到入口文件 按照配置进行打包

源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/5

如果一个项目下有两个webpack配置文件,可以通过如下命令 指定具体的配置文件进行打包 npx webpack --config webpack.config.dev.js

如果将webpack配置项重的mode 设为 development 打包的文件生成的js将不会被压缩

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

使用file-loader打包图片文件

安装file-loader

npm install file-loader -D

webpack.config.js配置如下

const path = require('path');

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

index.js增加图片的引用

var avatar = require('./avatar.jpg');
console.log(avatar);

执行打包命令

npm run bundle

源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/7

file-loader使用文档https://webpack.js.org/loaders/file-loader/

设置options配置项 规定打包文件的名称和输出路径

const path = require('path');

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

参考代码 https://github.com/lilugirl/learn-webpack4/tree/master/8

url-loader 打包

url-loader可以将图片打包成base64图片, 对于较小的图片这种方式比较合适, 对于大图使用file-loader比较合适。 对url-loader 增加limit配置 可以针对图片大小自动选择打包方案,如果图片不超过指定大小 就打包成base64图片,如果图片超过指定大小自动按照file-laoder打包。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name]_[hash].[ext]',
          outputPath: 'images/',
          limit: 10240
        }
      }
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

源码 https://github.com/lilugirl/learn-webpack4/tree/master/9

使用style-loader css-loader打包css文件

安装依赖

npm install style-loader css-laoder -D

css-loader负责处理css文件之间的引用关系,style-loader负责将相关的样式挂载到引用bundle.js的页面上。

webpack.config.js配置如下

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name]_[hash].[ext]',
          outputPath: 'images/',
          limit: 10240
        }
      }
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

src/index.js引入css的代码

import avatar from './avatar.jpg';
import './index.css';

var img = new Image();
img.src = avatar;
img.classList.add('avatar');

var root = document.getElementById('root');
root.append(img);

源码 https://github.com/lilugirl/learn-webpack4/tree/master/10

使用sass-loader打包scss文件

loader的执行顺序是 从下到上 ,从右到左

安装依赖

npm install style-loader css-laoder -D

npm install sass-loader node-sass -D

webpack.config.js的配置

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name]_[hash].[ext]',
          outputPath: 'images/',
          limit: 10240
        }
      }
    }, {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

src/index.js

import avatar from './avatar.jpg';
import './index.scss';

var img = new Image();
img.src = avatar;
img.classList.add('avatar');

var root = document.getElementById('root');
root.append(img);

示例源码 https://github.com/lilugirl/learn-webpack4/tree/master/11

使用postcss-loader提供自动补齐css前缀功能

安装依赖

npm i postcss-loader -D

npm i -D autoprefixer

创建postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')]
}

webpack.config.js设置如下

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name]_[hash].[ext]',
          outputPath: 'images/',
          limit: 10240
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        'postcss-loader'
      ]
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

package.json文件中增加browerlist

  "browserslist": [
    "iOS >= 6",
    "Android >= 4",
    "IE >= 9"
  ]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack 使用笔记

    执行 npm run pack ,定义了两个入口文件,也相应生成两个dist文件

    lilugirl
  • webpack+vue实践

    lilugirl
  • 使用rust构建一个js引擎

    lilugirl
  • webpack入门

    前言:这两天在网上找了些视频和资料学习webpack,最后发现官网上的教程原来就写得很好,只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程,然后总结...

    Ewall
  • 从零搭建一个 webpack 脚手架工具(一)

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器,已经成为前端开发不可获取的工具。特别是在开发大型项目时,项目太大,文件过多导致难以维...

    多云转晴
  • webpack入门——webpack的安装与使用

    一、简介 1、什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/s...

    用户1174387
  • Webpack前世今生

    在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。那个时候的代码是怎么写的呢?直接将代码写在<script>...

    说故事的五公子
  • 【Webpack】320- Webpack4 入门手册(共 18 章)(下)

    最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水...

    pingan8787

扫码关注云+社区

领取腾讯云代金券