Vue.js 第5章 webpack配置

为什么我们需要打包构建工具：因为我们以后做项目的时候，会使用到很多种不同的工具或者语言，这些工具或者语言其实浏览器并不支持

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

 

webpack打包构建工具玩法

过程：

1.先初始化包管理文件：npm init -y

2.下载安装webpack    npm i webpack webpack-cli -g

3.输入 webpack  源js文件；他会自动创建dist文件夹，将源js文件编译转换成浏览器可以支持的main.js文件

4.在你的html页面中引入转换之后的main.js文件

 

使用webpack.config.js实现webpack的配置

webpack.config.js有什么用?

它可以对webpack打包构建的行为进行约束或设置，意味着通过配置我们也可以让webpack拥有处理某种文件的能力

添加一个webpack.config文件，注意文件名称绝对不能修改

如何进行入口和输出的配置？

var path = require('path')
// 返回一个对象，这个对象中就包含当前前用户自定义的配置
module.exports = {
    // 入口：指定你想打包转换哪一个文件？源文件
    entry:'./src/app.js',
    // 输出
    output:{
        // path:打包构建目标文件的目录
        path:path.join(__dirname,"dist"),
        // filename:打包构建目标文件的文件名
        filename:'main.js'
    }
}

输入Webpack就可以将指定的文件打包构建为指定目录下指定名称的文件

出现有关mode的警告可以在命令的后面添加 --mode=development

在html文件中引入打包后的文件

使用webpack-dev-server

之前的代码配置还有一个问题很恶心：打包构建之后，如果用户修改的源代码，页面中并不会即时更新效果，我们需要重新打包构建，才能看到修改后的效果---不合理也麻烦

我们期望有一个工具能够让我们从反复打包构建中解脱出来。

 

webpack-dev-server是什么：就是webpack自动开启的一个内存服务器，它是webpack自动创建一个内存服务器，它会将打包构建好的资源文件放到这个服务器上进行托管，也就意味着这个资源文件已经不会再在本地存储了。

它能什么用：它是一个托管机制，它可以做到当用户修改源代码的时候，会自动的更新服务器资源，意味着我们修改源代码之后不用再手动webpack重新打包构建了。

 

如何使用

下载安装：npm i webpack-dev-server -g

添加配置

// 添加webpack-dev-server的配置
// 建议使用这个配置，新版本建议这样配置,默认会生成main.js
devServer: {
    //  设置托管文件的存储路径，这个路径中的资源后期可以被用户访问
    publicPath: '/dist'
}

运行命令：webpack-dev-server

开启服务器时自动打开浏览器：webpack-dev-server --open

webpack解析css

以后我们可能会什么样的方式来引入css文件

如果以import的方式引入css样式文件后的错误信息

 如何添加webpack配置，让webpack帮助我们解析css

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

css-loader:用于解析css文件

style-loader:用于将解析好的Css代码添加到页面中

添加配置

// 下面这个成员就是不同类型的文件的解析加载规则
module: {
    // 配置规则，里面可以添加多个规则的配置
    rules: [
        // 配置的是用来解析.css文件的loader(style-loader和css-loader)
        {
            // 1.0 用正则匹配当前访问的文件的后缀名是  .css
            test: /.css$/,
            use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
        }
    ]
}

webpack解析less和scss

 以后我们写样式 不一定就使用css,毕竟预处理器更强大也更方便，创建less文件，同时在app.js中做引入，发现错误如期而至，缺少对应的less处理loader。

配置过程：

下载：npm install less less-loader --save-dev

添加配置

// 配置less解析
{
    test: /.less$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'less-loader'
        }]
}

webpack-图标+图片

使用图片有问题并不是说在页面中引入图片资源有问题，而是将图片当成某个类型中的引入的资源来使用，如在样式中使用图片资源，这个时候就会出现类似的错误。

配置过程：

下载：npm install file-loader url-loader --save-dev

添加配置

{
    test: /.(png|jpg|gif|eot|svg|ttf|woff)/,
    use: [{
        loader: 'url-loader',
        options: {
          // limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
            limit: 50000
        }
    }]
}

webpack-babel

一些老版的浏览器可能不支持ES6，这个babel的作用就是能够将ES6转换ES5，达到兼容的目的。

现在新版webpack，新版node都已经能够支持ES6,意味着对于我们现的版本而言，你配置或者不配置都没有关系。

配置过程

下载:npm install babel-loader @babel/core @babel/preset-env --save-dev

添加配置

{
      test: /.js$/,
      // Webpack2建议尽量避免exclude，更倾向于使用include
      // exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
      include: [path.resolve(__dirname, 'src')],
      use: {
        loader: 'babel-loader',
        // options里面的东西可以放到.babelrc文件中去
        options: {
            presets: ['@babel/preset-env']
          }
      }
    }

思维脑图总结