webpack4 打包静态资源

demo 代码点此，开始之前，先做点准备工作。

准备工作

准备一个空文件夹，然后执行下列命令：

npm init -y

npm i -D webpack webpack-cli

然后创建一个 dist 目录，并在里面创建一个 indedx.html：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>webpack4 loader 打包静态资源</title>

</head>

<body>

  <div id="root"></div>

  <!-- 这里引入待会将要打包好的 JS 文件 -->

  <script src="./bundle.js"></script>

</body>

</html>

接着创建一个 src 目录，在里面创建一个 lib 文件夹，创建一个 until.js:

// until.js

export function $ (id) {

  return document.getElementById(id);

}

export function add (x, y) {

  return x + y;

}

再创建 components 文件夹，再写入几个 js:

// Content.js

import { $ } from '../lib/until';

export default function Content () {

  let content = document.createElement('div');

  content.innerText = 'content';

  $('root').appendChild(content);

}

// Footer.js

import { $ } from '../lib/until';

export default function Footer () {

  let footer = document.createElement('div');

  footer.innerText = 'footer';

  $('root').appendChild(footer);

}

// Header.js

import { $ } from '../lib/until';

export default function Header () {

  let header = document.createElement('div');

  header.innerText = 'header';

  $('root').appendChild(header);

}

在 src 下创建 index.js：

import Header from './components/Header';

import Content from './components/Content';

import Footer from './components/Footer';

import { $ } from './lib/until';

Header();

Content();

Footer();

配置 webpack

在根目录下，创建 webpack.config.js:

const path = require('path');

module.exports = {

  // mode: 'production',

  mode: 'development',

  // 入口

  // entry: './src/index.js',

  entry: {

    main: './src/index.js',

  },

  // 出口

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist'),

  },

}

然后在 package.json 中的 scripts 中加入：

"scripts": {

  ...

+  "bundle": "webpack"

},

在终端运行npm run bundle执行打包，然后访问 /dist/index.html即可。

打包图片

执行下列命令：

npm i -D url-loader

然后在 src 下创建 assets/images/ 文件夹，然后放入一张图片即可：

/src/assets/images/webpack.jpg

然后修改 webpack.config.js:

const path = require('path');

module.exports = {

  // mode: 'production',

  mode: 'development',

  // 入口

  // entry: './src/index.js',

  entry: {

    main: './src/index.js',

  },

+  module: {

+    rules: [{

+      // 打包图片

+      test: /\.(jpg|png|gif)$/,

+      use: {

+        // loader: 'file-loader',

+        loader: 'url-loader',

+        options: {

+          name: '[name]_[hash].[ext]',

+          outputPath: 'images/',

+          limit: 8192,

+        },

+      },

+    },

+  },

  // 出口

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist'),

  },

}

再修改 index.js:

import Header from './components/Header';

import Content from './components/Content';

import Footer from './components/Footer';

+ import webpack from './assets/images/webpack.jpg';

import { $ } from './lib/until';

Header();

Content();

Footer();

+ let root = $('root');

+ let img = new Image();

+ img.src = webpack;

+ img.id = 'img';

+ root.appendChild(img);

执行打包即可。

打包css、less、scss

这里仅配置 less，安装 loader：

npm i -D less less-loader css-loader style-loader postcss-loader

在 src 下创建 index.less：

// index.less

body {

  background-color: #ffffff;

}

#img {

  transform: translate(50px, 0);

}

然后修改 webpack.config.js:

const path = require('path');

module.exports = {

  // mode: 'production',

  mode: 'development',

  // 入口

  // entry: './src/index.js',

  entry: {

    main: './src/index.js',

  },

  module: {

    rules: [{

      // 打包图片

      test: /\.(jpg|png|gif)$/,

      use: {

        // loader: 'file-loader',

        loader: 'url-loader',

        options: {

          name: '[name]_[hash].[ext]',

          outputPath: 'images/',

          limit: 8192,

        },

      },

    },

+    {

+      // 打包 css、less

+      test: /\.(css|less)$/,

+      use: [

+        'style-loader',

+        {

+          loader: 'css-loader',

+          options: {

+            importLoaders: 2,

+          }

+        },

+        'less-loader',

+        'postcss-loader',

+      ],

+    }],

  },

  // 出口

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist'),

  },

}

再修改 index.js:

import Header from './components/Header';

import Content from './components/Content';

import Footer from './components/Footer';

import webpack from './assets/images/webpack.jpg';

import { $ } from './lib/until';

+ import './index.less';

Header();

Content();

Footer();

let root = $('root');

let img = new Image();

img.src = webpack;

img.id = 'img';

root.appendChild(img);

安装 autoprefixer 为 css 自动添加浏览器前缀：

npm i -D autoprefixer

然后在根目录创建 postcss.config.js：

module.exports = {

  plugins: {

    'autoprefixer': {

      overrideBrowserslist: [

        "Android 4.1",

        "iOS 7.1",

        "Chrome > 31",

        "ff > 31",

        "ie >= 8"

      ]

    },

  }

}

接着打包即可。

打包字体文件

安装 loader:

npm i -D file-loader

修改 webpack.config.js:

const path = require('path');

module.exports = {

  // mode: 'production',

  mode: 'development',

  // 入口

  // entry: './src/index.js',

  entry: {

    main: './src/index.js',

  },

  module: {

    rules: [{

      // 打包图片

      test: /\.(jpg|png|gif)$/,

      use: {

        // loader: 'file-loader',

        loader: 'url-loader',

        options: {

          name: '[name]_[hash].[ext]',

          outputPath: 'images/',

          limit: 8192,

        },

      },

    },

    {

      // 打包 css、less

      test: /\.(css|less)$/,

      use: [

        'style-loader',

        {

          loader: 'css-loader',

          options: {

            importLoaders: 2,

            // css 模块化

            // modules: true,

          }

        },

        'less-loader',

        'postcss-loader',

      ],

    },

    {

+      // 打包字体文件

+      test: /\.(eot|ttf|svg|woff|woff2)$/,

+      use: {

+        loader: 'file-loader',

+        options: {

+          outputPath: 'font/',

+        }

+      },

+    }],

  },

  // 出口

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist'),

  },

}

然后创建文件夹 /src/assets/font/，在里面放一下字体文件，我放的是图标的字体文件。

// 这些是我放入的字体文件

iconfont.eot

iconfont.svg

iconfont.ttf

iconfont.woff

iconfont.woff2

修改 index.js:

import Header from './components/Header';

import Content from './components/Content';

import Footer from './components/Footer';

import webpack from './assets/images/webpack.jpg';

import { $ } from './lib/until';

import './index.less';

Header();

Content();

Footer();

let root = $('root');

let img = new Image();

img.src = webpack;

img.id = 'img';

root.appendChild(img);

+ let div = document.createElement('div');

+ div.classList.add('iconfont', 'icon-chenggong');

+ root.appendChild(div);

再修改 index.less:

body {

  background-color: #ffffff;

}

#img {

  transform: translate(50px, 0);

}

+ @font-face {font-family: "iconfont";

+   src: url('./assets/font/iconfont.eot?t=1563786008234');

+   src: url('./assets/font/iconfont.eot?t=1563786008234#iefix') format('embedded-opentype'),

+   url('data:application/x-font-woff2;charset=utf-8;base64,') format('woff2'),

+   url('./assets/font/iconfont.woff?t=1563786008234') format('woff'),

+   url('./assets/font/iconfont.ttf?t=1563786008234') format('truetype'),

+   url('./assets/font/iconfont.svg?t=1563786008234#iconfont') format('svg');

+ }

+

+ .iconfont {

+   font-family: "iconfont" !important;

+   font-size: 16px;

+   font-style: normal;

+   -webkit-font-smoothing: antialiased;

+   -moz-osx-font-smoothing: grayscale;

+ }

+

+ .icon-chenggong:before {

+   content: "\e873";

+ }

打包即可，访问网页可以看见图标。

备注

具体可查看 webpack4 官网。