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"
  ]

运行 npm run bundle

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

来源：https://my.oschina.net/lilugirl2005/blog/3113249

标签

postcss

npm

Webpack