webpack简单记录

安装webpack

#目录下
npm init
npm install --save-dev webpack webpack-cli

修改package.json

#确保私有和不意外发布
{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+   "build":"webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

添加设置配置文件

#根目录添加
webpack.config.js

配置文件示例

const path = require('path');

module.exports = {
  entry: './src/index.js', #入口
  output: {
    filename: 'bundle.js', #出口
    path: path.resolve(__dirname, 'dist')
  }
};

#入口可以是一个数组

构件命令

npm run build

加载css

#主目录安装
npm install --save-dev style-loader css-loader

示例

  const path = require('path');

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

加载图片 字体略

加载数据

#根目录安装
npm install --save-dev csv-loader xml-loader json-loader

示例

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+         ]
+       },
+       {
+         test: /\.xml$/,
+         use: [
+           'xml-loader'
+         ]
+       }
      ]
    }
  };

!! js文件不能再根目录，否则run build会报错找不到文件。（目前不知道为什么）