webpack3快速入门

前言

这篇文章是本人学习 webpack3 的笔记总结，现在 webpack 版本已经更新到了4。其中2和3是可以通用的，但是1和其他的两个版本依赖上有些不相容，所以不能一起使用。Webpack1到2最大的升级是tree-shaking，其次是配置文件的对象化，再其次包括插件的写法优化。Webpack2到3的最大升级是scope-hoisting。3到4简化了整个打包配置操作。

什么是webpack

webpack 是一个模块打包器，它将根据模块的依赖关系进行静态分析，生成对应的静态资源

理解Loader

webpack 本身只能加载 JS/JSNO 模块，如果加载其他类型的文件（模块），就需要使用对应的 loader 进行转换/加载，它本身是一个函数，接受源文件作为参数，返回转换的结果。loader 一般以
xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转化功能，比如 css-loader

配置文件(默认)

webpack.config.js ：是一个node模块，返回一个 json 格式的配置信息对象

插件

插件可以完成一些 loader 不能完成的功能，插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。常用的插件如下：（需要了解更多插件可以查看webpack2中文文档）
CleanWebpackPlugin: 自动清除指定文件夹资源
HtmlWebpackPlugin: 自动生成HTML文件并
UglifyJSPlugin: 压缩js文件

初始化项目

npm init :生成 package.json 文件，也可以手动创建

{
  "name": "webpack01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

安装 webpack

npm install webpack -g ：全局安装
npm install --save-dev webpack ：局部安装
pm install [email protected] --save-dev ：安装指定的版本
如果你使用 webpack v4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli 或 npm install --save-dev webpack-command
安装完成后可通过 webpack 命令检验是否成功，webpack -h 可以查看 webpack 的版本。

实现打包功能

创建一个空的项目，创建入口src/js/ : entry.js：用于引入所需要打包的各种文件

import {foo,bar} from "./main";
import data from "../data/test.json";

import '../css/test.css';

*document.write(“entry.js is work”); //内容可随意编写，只是为了初步检验
编译js
webpack src/js/entry.js dist/js/bundle.js ，其中 src/js/entry.js 是需要打包的文件路径，dist/js/bundle.js 是打包后生成文件的路径，每更新一次数据都需要重新执行打包命令。

使用 webpack 配置文件

webpack.config.js：该配置模式固定，可以直接复制，更改自己对应的文件路径即可。

const path = require('path');
module.exports = {
  entry: './src/index.js',    //入口文件，即需要打包的文件集合
  output: {
    filename: 'main.js',  //打包后的输出文件名
    path: path.resolve(__dirname, 'dist')  //输出文件路径
  }
};

使用该配置文件后可以通过 webpack 命令即可执行打包文件，则简化了上面 webpack src/js/entry.js dist/js/bundle.js 这一大串的命令。

打包css和图片文件

安装样式的 loader
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
配置 loader
webpack.config.js

module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192      
              }
            }
          ]
        }
      ]
    }

在 src目录下创建一个 image 文件夹，并放入两张图片
* 小图: img/logo.png
* 大图: img/big.jpg
创建样式文件: src/css/test.css

body {
      background: url('../img/logo.jpg')
    }

更新入口 js : entry.js
import ‘…/css/test.css’
添加css样式

 #box1{
		  width: 300px;
		  height: 300px;
		  background-image: url("../image/logo.jpg");
		}
		#box2{
		  width: 300px;
		  height: 300px;
		  background-image: url("../image/big.jpg");
		}

index.html 添加元素

执行打包命令 webpack
注意：此时会出现问题，大图无法打包到entry.js文件中，index.html不在生成资源目录下。页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到。
解决办法：
使用publicPath : ‘dist/js/’ //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。将index.html放在dist/js/也可以解决。

自动编译打包

利用webpack开发服务器工具: webpack-dev-server
下载
npm install --save-dev webpack-dev-server
执行：webpack-dev-server
**注意：**我在这个地方之前遇到了一个问题，也是花了不少时间才解决的，当执行 webpack-dev-server 时，提示错误，说webpack-dev-server 不是内部命令
解决办法：
1、删除
node_modules
2、更改镜像
npm config set registry https://registry.npm.taobao.org
3、安装
nmp install
4、指定版本安装 webpack-dev-server
npm install -g [email protected]
5、启动
webpack-dev-server
webpack配置

      devServer: {
        contentBase: './dist'
      },

package 配置

"start": "webpack-dev-server --open"

最后编译打包应用并运行
npm start