webpack简单入门

一、什么是webPack

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

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

二、webPack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本

webpack -v

3、创建src文件夹

3.1 创建common.js

exports.info = function(str){
    document.write(str)
}

3.2 创建utils.js

exports.add = function(a,b){
    return a+b
}

3.3 创建main.js 

const common=require('./common.js')
const utils=require('./utils.js')

common.info('hello'+utils.add(100,200))

三、js打包

1、webpack目录下创建配置文件webpack.config.js 

const path = require('path');//Node.js内置模块
module.exports={
    entry:'./src/main.js',//配置入口文件
    output: {
        path: path.resolve(__dirname,'./dist'),//输出路径，_dirname:当前文件所在路径***注意是两个下划线
        filename:'bundle.js' //输出文件
    }
}

2、命令行执行编译命令 

webpack #有黄色警告

如果单独使用这个命令会有警告，警告的内容是说你没有指定模式，那么有两种指定模式的方法：

（1）在命令行指定：

webpack --mode=development #没有警告

 （2）在配置文件指定：

module.exports = {
  mode: 'development',
  },
};

四、css打包

1、在src文件夹创建style.css

body{
    background-color: blue;
}

2、修改main.js 

//引入css文件
require('./style.css')

3、修改webpack.config.js

module:{
    rules:[
        {
            test:/\.css$/, //打包规则应用到以css结尾的文件上
            use:['style-loader','css-loader']
        }
    ]
}

4、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

三、常见bug

1、下面两种错误

[webpack-cli] Failed to load 'F:\a大三下学期课程\vue\test1\webpack\webpack.config.js' config
[webpack-cli] ReferenceError: _dirname is not defined

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'relues'. These properties are valid:

 出现上面其中一种bug很显然是在配置文件中出现错误，一般先检查一些关键字有没有输入错误，方法名称有没有输入错误。我出现这个错误的原因相信如果大家是手打的话也会遇到这个错误，那就是_dirname只写了一个下划线，是两个下划线，两个下划线！！

output: {
    path: path.resolve(__dirname,'./dist'),//输出路径，_dirname:当前文件所在路径***注意是两个下划线
    filename:'bundle.js' //输出文件
}