webpack基础——1

千锋斯坦僧
123 阅读4分钟

webpack是一个模块化的打包工具，在webpack火起来之前还有其他的一些的打包工具，例如gulp，grunt等等。

安装webpack

要安装webpack首先要确认你已经安装过了Node.js了，这里我们可以先做确认，如果你是windows系统那么可以按下win+R，此时桌面左下角会出现一个运行的小窗口。

image.png 那么此时就会弹窗一个黑窗口，这个窗口叫做DOS窗口，接着在黑窗口中输入： node -v 和 npm -v

你就会看见当前你电脑中node和npm两个工具的当前版本号了。

node -v
npm -v

image.png 好了，到此确认结束，接下来我们就可以安装webpack了。

安装webpack-cli

在DOS窗口输入：npm i webpack-cli -g

这个安装指令的意思就是在电脑上全局安装webpack-cli，webpack-cli是webpack的脚手架，这样安装的好处就是你在电脑上任何一个地方都可以使用webpack-cli工具。

安装webpack

在DOS窗口输入：npm i webpack -g

这个安装指令的意思就是在电脑上全局安装webpack，这个是webpack的运行程序，将来我们要对项目进行打包就需要用到这个运行程序，当然全局安装也是为了将来使用的时候方便。

确认安装完毕

在DOS窗口输入：

    webpack -v

如果你的DOS窗口输出了下面这段话那么你就是安装成功了。

image.png

小试牛刀

当我们把上面要安装的东西全部安装完毕之后就可以开始试试webpack打包的功能了，首先我们找到一个空闲的目录，在此处可以新建项目，DOS窗口输入：

    # 创建webpack-base1目录
    mkdir webpack-base1

接着进入项目根目录：

    cd webpack-base1

在初始化项目:

    npm init -y

项目初始化成功之后在项目的根目录下创建一个文件：webpack.config.js，这个文件非常重要，咱们的webpack打包方式和打包逻辑都是按照这个文件里面的配置项去实现的。没错，这个文件就是webpack的配置文件。

接下来我们可以在配置文件中输入一些代码，每个代码我都会写上它们各自的含义：

    const path = require("path") // 引入node环境的path模块

    module.exports = {
        mode:"development", // 模式：开发环境
        entry:"./src/index.js", // 制定打包的入口文件
        output:{ // 将来打包好的文件输出到哪里
            filename:"main.js",// 打包好的文件的名字
            path:path.resolve(__dirname,"dist") // 上面的文件输入到哪个目录中
        }
    }

配置文件写好之后我们还需要修改一下package.json文件中的scripts选项

image.png 这些都做好之后我们就可以在DOS之后输入：

    npm run build

不出意外的话那么你的第一个webpack程序就完毕了，最终的执行结果如下图： image.png

loader

loader在webpack中是一个非常重要的东西。对于webpack来说它只能认识 .js 和 .json 之类的文件，除此之外的文件都需要有loader帮助它来识别和工作。

例如现在我们需要webpack帮助我们来处理 .js 和 .css 的文件，在src中创建css目录和js目录，分别再创建user.js和style.css这两个文件，如果我们在index.js中引入user.js的话那么就会正常执行且打包，如果要引入style.scss的话就会报错，但是我们希望webpack帮助我们打包sass的话就只能借助loader了，具体做法：

  • 1，安装：css-loader，style-loader
  • 2，配置webpack.config.js中的loader

在webpack.config.js中写入：

    // loader模块
    module:{
        rules:[
            {
                test:/\.css$/i, // 利用正则匹配所有 .css 结尾的文件
                use:["style-loader","css-loader"] // 让这些 .css 的文件被use数组中的 loader 倒序挨个执行
            }
        ]
    }

当然在index.js中也需要对 .css 文件进行引入：

image.png 最后一步对着DOS窗口一顿输出：

    npm run build

结果：

image.png 最终我们在浏览器中打开index.html的效果为：

image.png

最后的注意点

第一个webpack的最基础的部分就已经说完了，这里我们需要注意一点关于entry的东西，这个东西的配置有三种写法，如下：

  • 1，值为字符串：指定入口，单入口
  • 2，值为数组，指定入口，单入口
  • 3，值为对象，给多个key，多入口

字符串类型的上面演示过了，下面就说数组和对象的

    // 数组的形式就是说将来打包的时候将index.js和index2.js合成一个文件作为打包的入口
    entry:["./src/index.js","./src/index2.js"]
    
    // 对象的形式就是说将来我们的打包入口有两个，分别为index1和index2
    entry:{
        index1:"./src/index.js",
        index2:"./src/index2.js",
    },
    output:{ 
        // 这里一定要注意，filename的值不能写死，应该使用变量
        // 此时name就是变量它的值就是index1和index2
        filename:"[name].js",
        path:path.resolve(__dirname,"dist")
    },
avatar
文章
阅读
粉丝