一文带你了解webpack

1、webpack介绍和简单使用

1.1 什么是webpack？

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)。

1.2 安装webpack

1.全局安装：

cnpm install webpack -g
cnpm install webpack-cli -g

也可以通过npm进行全局安装，最好的是使用cnpm，因为cnpm 服务部署在国内阿里云服务器上 ， 可以提高包的下载速度 官方也提供了一个全局工具包 cnpm ，操作命令与 npm 大体相同。

我们可以通过 npm 来安装 cnpm 工具

npm install -g cnpm --registry=https://registry.npmmirror.com

安装webpack：cnpm install webpack -g

安装webpack脚手架：cnpm install webpack-cli -g

2、测试版本
我们来测试一下版本

1.3 简单使用一下webpack

说明一下：webpack本身之前是打包js的，如果要打包：html、css…需要借助一些东西。

1、进入项目目录，随便创建一个js文件

2、在该目录中下载webpack

cnpm install webpack -S

此时该目录下会多出两个文件

3、在终端执行：webpack进行打包

它告诉我们index必须在src目录下面。
我们改下文件目录

再次打包

此时目录种会多出一个dist文件夹


我们打开main.js看看发生了什么变化

原index.js文件：

打包后对代码进行了压缩。

2、webpack的入口与输出

2.1 入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：
webpack.config.js

module.exports = {
   
  entry: './path/to/my/entry/file.js',
};

我们对上面的例子进行改造，将index.js改为script，如果此时直接打包则会报错，因为默认入口是index.js所以我们要改一下入口文件。


在webpack.config.js文件中进行改变。

打包：

2.2 输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

const path = require('path');

module.exports = {
   
  entry: './path/to/my/entry/file.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

我们对上面的例子进行改造，改变出口位置。

打包：

文件目录：

3、入口多种配置方法

3.1 多文件打包成一个文件

问题：多个入口文件==》单文件出口
解决：将entry改成数组写法，即可。

var path = require('path');
module.exports ={
   
    entry:['./src/script.js','./src/a.js','./src/b.js'],
    output:{
   
        path:path.resolve(__dirname, 'dist'),
        filename:'main.js',
    }
}

3.2 多文件打包成多文件

问题：多个入口文件==》多个文件出口
解决：将entry改成对象写法，key必须为文件名，值为文件路径，并且出口只写一个path即可，不要命名文件。

var path = require('path');
module.exports ={
   
    entry:{
   
        script:'./src/script.js',
        a:'./src/a.js',
        b:'./src/b.js'
    },
    output:{
   
        path:path.resolve(__dirname, 'dist'),
    }
}

4、loader的概念

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
简单来说：就是webpack默认只能打包js和json文件，如果想打包html、css、图片等等类型的文件…就需要用到对应的loader。

Warning：

webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中，loader 有两个属性：

1、test 属性，识别出哪些文件会被转换。
2、use 属性，定义出在进行转换时，应该使用哪个 loader。
webpack.config.js

const path = require('path');

module.exports = {
   
  output: {
   
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
   
    rules: [{
    test: /\.txt$/, use: 'raw-loader' }],
  },
};

我们对之前的例子进行改造，添加一个css样式，然后打包。

引入样式

css

var path = require(<