[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

文件结构

.
├── dist/
├── node_modules/
├── index.css
├── index.html
├── index.js
├── index2.css
├── package.json
└── webpack.config.js

模板下载 (v1)

webpack.config.js

module.exports = {
  mode   : 'development',
  entry  : './index.js',
  output : {
    filename : 'bundle.js',
    path     : __dirname + '/dist',
  },
  module : {
    rules : [
      {
        test : /\.css$/i,
        use  : [
          {
            loader : 'style-loader', // 用<style>元素插入到<head>中
          },
          {
            loader  : 'css-loader', // 解析CSS语法
            options : {
              sourceMap : true, // 源码映射，不然打包后的样式跟源码对应不上，很难debug
            },
          },
        ],
      },
    ],
  },
};

index.html

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

index.js

import './index.css';
import './index2.css';

console.log('Yo');

index.css

body {
  background: tomato;
}

index2.css

body {
  border: 2em solid;
}
[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

文件结构

同上

webpack.config.js

module.exports = {
  mode   : 'development',
  entry  : './index.js',
  output : {
    filename : 'bundle.js',
    path     : __dirname + '/dist',
  },
  module : {
    rules : [
      {
        test : /\.css$/i,
        use  : [
          {
            loader : 'style-loader/url', // 将<link>插入到<head>中
          },
          {
            loader  : 'file-loader', // 加载文件且生成文件地址
            options : {
              publicPath : './dist', // 公共目录，即地址栏中的目录地址
              name       : '[hash].bundle.css', // 文件名
            },
          },
        ],
      },
    ],
  },
};
登录后评论