Webpack基础操作

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

接下来我们简单为大家介绍 Webpack 的安装与使用。

安装 Webpack

在安装 Webpack 前，你本地环境需要支持 node.js。
通过npm下载：
创建node项目 执行命令npm init -y 生成packge.json
在当前目录安装本地webpack

npm install webpack --save

全局安装

npm install webpack -g

在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。
所以当安装的webpack版本为4以上时还需安装webpack-cli
局部

npm install webpack-cli -d

全局

npm install webpack-cli -g

注：如果觉得npm安装速度慢，还可以使用 cnpm 安装 webpack
此时创建好的项目目录如下

接下来我们使用 webpack 命令来打包：

webpack ./src/index.js -o ./dist/bundle.js

执行命令后如果是这样则打包成功

这时候会发现项目下的dist目录中多了一个bundle.js文件

bundle.js文件中是webpak打包好的文件，这个文件中的代码是从index.js编译过来的浏览器认识的代码

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

接下来配置一个webpack.config.js文件，更加方便进行打包操作
在项目下创建一个webpack.config.js文件
文件中代码如下：

const path = require('path');

//  这个配置文件  本质就是一个js文件  通过node中的模块操作  向外暴漏一个配置对象

module.exports = {
    //  入口文件  需要打包的文件
    entry:path.join(__dirname,'./src/index.js'),
    //  输出文件的相关配置
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'  //  指定输出文件名
    }
}

将这个文件配置好后只需运行命令webpack就能对主入口文件进行打包

到这里虽然打包方便了很多，但是每次修改代码还是需要手动打包，现在想要自动编译打包可以使用webpack-dev-server这个工具。
将webpack-dev-server这个工具安装的项目的本地开发依赖中

npm install webpack-dev-server -D

我在这里遇到一些问题
由于之前的webpack为全局安装，可以手动打包，但在运行webpack-dev-server时遇见了如下问题：

解决方法：
我下载了局部webpack

npm install webpack

npm install --save-dev webpack-cli

npm install webpack-dev-server

注意：如果遇到一下情况可能是webpack.config.js中config.devServer 配置出现了问题

如果遇到node.js找不到xxx 这个模块

按顺序来。
1.检查一下是否拼写错误。
2.这个模块是自己写的，是的话。检查一下路径是否正确。

3.如果是导入的模块。用 npm list这个命令输出一下，是否有这个模块。没有的话，安装一下 （nodejs总文件夹下输入 npm install xxxx）
4.另外注意一下，全局模块安装目录默认为users/用户/node_modules 下面 。而你的项目读取的模块是你的安装目录（有可能这两个目录是不同的）。所以有时候会出现，没有这个模块，安装完后，还是继续报找不到模块的错误

接下来做一些配置执行打包后直接打开页面
在webpack.config.js配置一下代码

    devServer:{
        open:true,  //自动打开浏览器
        port:3000,
        contentBase:'src',  //指定托管的根目录
        hot:true  //启用热更新
    }

接下来要将页面也放到内存中
要用到html-webpack-plugin插件

npm install html-webpack-plugin -D

webpack.config.js中配置

const webpack = require('webpack');

const htmlWebpackPlugin = ('html-webpack-plugin');

    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'  //指定内存中生成的页面的名称
        })
    ]

打包css文件
要用到第三方插件style-loader和css-loader

npm i style-loader css-loader -D

webpack.config.js中配置

module:{
        rules:[   //所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }

创建css文件写一些css样式index.css
在index.js中导入

import './css/index.css';

css预处理less
下载less和less-loader

npm i less --save

npm i less-loader -D

webpack.config.js中配置

{test:/\.less$/,use:['style-loader','css-loader','less-loader']}

编写一个less文件

@width:200px;
@height:500px;

#app{
    width: @width;
    height: @height;
}

在index.js中导入

import './css/index.less';

css预处理scss
下载scss依赖加载器

npm install sass-loader -D
npm install node-sass -D

webpack.config.js中配置规则

{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

打包图片
下载插件

npm i url-loader file-loader -D

css

$nav-color: #F90;
#app {
  $width: 500px;
  width: $width;
  height: 200px;
  background: url(../img/banner.png);
}

webpack.config.js中配置规则

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=18896'}