webpack使用教程

一、webpack的概念

webpack是一个前端工具，可以让各个模块进行加载、预处理，再进行打包，它有gulp和grunt的大部分基本功能，它的最大区别就是提供了模块化解决方案，可以把各种资源作为模块来使用和处理。

二、安装与相关配置（包括打包文件）

注：以下命令在安装node.js后，在其命令行工具中输入命令

步骤如下：

1、在要用的webpack的文件夹下初始化npm

命令：npm init

命令执行完后，会在该文件夹下产生一个package.json文件

2、初始化完后，使用npm在这个文件下安装webpack

命令：npm install webpack --save-dev

3、在你新建的项目文件夹下建一个新文件，如：index.js

对其进行打包

命令：webpack 打包的文件名 打包后的文件名

如：webpack index.js index.bundle.js

4、引入文件

（1）如果需要引入其他的的js文件，则可以直接在index.js文件头部加上代码：require('./文件路径及名字.js'),再进行打包就行,即再执行webpack index.js index.bundle.js

（2）引入css文件

方法一：

如果需要引入css文件，则可以直接在index.js文件头部加上代码：require('css-loader!./文件路径及名字.css'),但是需要先在命令行下引入css-loader和style-loader,再进行打包就行，否则会报错；

引入css-loader和style-loader的命令：npm install css-loader style-loader --save-dev

补充：

css-loader使得webpack可以处理.css文件；style-loader使得webpack可以通过在html文件插入