webpack介绍

1.为什么我们需要打包？

模块化
优化加载速度
使用新的开发模式

2.webpack特点

同时支持CommonJs和AMD
一切都可以打包
分模块打包

3.正式使用webpack前的准备

全局安装webpack：npm install webpack -g
创建工程目录：mkdir webpack-test
进入工程目录：cd webpack-test
初始化工程信息： npm init 或 npm init -y
安装依赖工具：npm install
将webpack打包工具依赖进来：npm install --save-dev webpack
在工程根目录下创建 index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack-test</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

4.打包js文件

在工程根目录下创建src文件夹，在src文件夹中创建 index.js

document.write('hello webpack!');

在工程根目录下创建webpack.config.js

const path = require('path');

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

在工程根目录下创建dist文件夹，将index.html文件拷贝到dist文件夹下

在工程目录下执行webpack --config webpack.config.js
运行dist文件夹下面的index.html文件可以看到运行结果
PS：设置npm脚本调整package.json ，运行命令npm run build

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

5.打包css文件

将css-loader和style-loader依赖进来：npm install --save-dev css-loader style-loader
在src文件加下创建style.css , 并且编写相关样式
在webpack.config.js文件中做如下配置：

const path = require('path');

module.exports = {
    //入口
    entry: './src/index.js',
    //输出
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    //模块处理
    module: {
        loaders: [{
            //使用正则表达式检测文件后缀名
            test: /.css$/,
            //使用两个loader处理css文件，先执行css-loader(对css文件读取，处理url),再执行style-loader(读取css文件应用到页面上，即显示样式)
            loaders: ['style-loader', 'css-loader']
        }]
    }
};

在src文件夹下的index.js添加代码：

require('./style.css');

控制台运行命令：npm run build
刷新浏览器页面

6.加载图片：npm install --save-dev file-loader

7.加载字体

8.加载数据：npm install --save-dev csv-loader xml-loader