webpack打包工具3(对各种文件的处理)

一、webpack实现对css文件的打包

注意：webpack 只能打包处理 js 类型的文件，无法处理其他非 js 类型的文件。
解决方法：我们需要手动安装一些合适的第三方 loader 加载器。
打包 css 文件，需要安装：cnpm i style-loader css-loader -D
在 webpack.config.js 配置文件中，新增一个配置节点，叫 module ，是一个对象，在module 对象身上有一个rules属性
是一个数组，存放了所有第三方文件的匹配和处理规则。

//这是一个配置文件，本质是一个js文件，通过Node中的模块操作，向外暴露一个配置对象
module.exports = {
    mode:'development',
    //在这儿需要手动的指定 入口 和 出口文件
    entry: path.join(__dirname, './src/main.js'),   //入口，表示webpack要打包的哪个文件
    output:{   //输出文件相关的配置
        path: path.join(__dirname, './dist'),   //指定打包好的文件输出到哪个目录中去
        filename: 'bundle.js',    //这是指定输出的文件名称
    },
    plugins:[  //配置插件的节点
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),  //指定模板页面，将来根据指定的页面路径，去生成内存总的页面
            filename: 'index.html',   //指定生成的内存页面名称
        })
    ],
    module:{  //用于配置所有第三方模块加载器的节点
        rules:[
            {test:/\.css$/, use:['style-loader','css-loader']},  //处理 .css 的文件第三方 loader 规则
        ]
    }
}

二、webpack实现less的打包

实现less文件打包所依赖的包有：①css-loader ②style-loader ③less-loader ④less（less-loader的依赖包）

警告提示我们去安装 less 依赖包

注意：也可以去直接将依赖包全部安装：cnpm install less less-loader style-loader css-loader -D
同理，需要在webpack.config.js中去配置

 module:{  //用于配置所有第三方模块加载器的节点
        rules:[
            {test:/\.css$/, use:['style-loader','css-loader']},  //处理 .css 的文件第三方 loader 规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},    //注意先后顺序
        ]
    }

三、webpack实现scss打包

打包scss文件需要依赖①css-loader ②style-loader ③sass-loader ④node-sass（这个包为sass-loader所依赖的）
注意：一般情况下使用 npm 装 node-sass 是装不下去的,所以我们使用 cnpm 来装。

module:{  //用于配置所有第三方模块加载器的节点
        rules:[
            {test:/\.css$/, use:['style-loader','css-loader']},  //处理 .css 的文件第三方 loader 规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},  //处理 .less 文件
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},  //处理 .scss 文件
        ]
    }

注意：在我们实际项目开发中，css、less、scss 文件只需要其中一个即可。

四、webpack实现url请求资源的打包

打包url()请求的资源需要安装的node包有：①url-loader ②file-loader（url-loader依赖的loader） 命令： cnpm i url-loader file-loader -D
举例：在文件中设置 css 背景图 background-images: url(…/images/zlq.jpg);
在 index.css 中设置了背景图
在 mian.js 中引入文件， import ‘./css/index.css’;
接下来需要在 webpack.config.js 中进行配置

module:{  //用于配置所有第三方模块加载器的节点
        rules:[    //第三方模块的匹配规则
            {test:/\.css$/, use:['style-loader','css-loader']},  //处理 .css 的文件第三方 loader 规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},  //处理 .less 文件
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},  //处理 .scss 文件
            /*
				处理图片路径的loader     参数解释：
				limit：指定图片的大小，单位字节，当我们的图片大于指定大小时，会被转化为 base64 格式的字符串。
				name：指定生成的图片的名称
							[hash:8]- ：在图片名称前加一组哈希值，以防重复，8表示截取32位哈希值的前8位
							[name] ：表示生成图片的名称是原图片名称
							[ext] ：表示图片文件的格式不变
			*/
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, 
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},   //处理字体文件的loader
        ]
    }

五、webpack实现ES6的打包

注意：webpack只能处理部分 ES6 的新语法，因此需要导入第三方 loader 来帮助 webpack 来处理。

• 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：
  第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
  注意：安装时当出现如下警告的时候，解决方法，：cnpm i @babel/core -D
  
  
• 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：
  { test:/.js$/, use: ‘babel-loader’, exclude:/node_modules/ }
  注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
  如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
  哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
• 在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号
  在 .babelrc 写如下的配置： 大家可以把 preset 翻译成 【语法】 的意思

{
	"presets": ["env", "stage-0"],
	"plugins": ["transform-runtime"]
}

• 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法

module:{  //用于配置所有第三方模块加载器的节点
        rules:[
            {test:/\.css$/, use:['style-loader','css-loader']},  //处理 .css 的文件第三方 loader 规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},  //处理 .less 文件
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},  //处理 .scss 文件
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    }

六、webpack打包 .vue 组件页面

Vue项目中的每个页面都是一个.vue文件，这种文件，Vue称之为组件页面。必须借助于webpack的vue-loader才能够解析。

所依赖的包：cnpm i vue-loader vue-template-compiler -D

在配置文件中，新增loader配置项 { test:/\.vue$/, use: 'vue-loader' }

module:{  //用于配置所有第三方模块加载器的节点
    rules:[
        {test:/\.css$/, use:['style-loader','css-loader']},  //处理 .css 的文件第三方 loader 规则
        {test:/\.less$/, use:['style-loader','css-loader','less-loader']},  //处理 .less 文件
        {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},  //处理 .scss 文件
        // {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        {test:/\.vue$/, use: 'vue-loader'}  //配置 .vue 文件
    ]
},

• 首先下载vue ： npm i vue -S
• 在 main.js 中导入 vue 包
  注意： 在 webpack 中， 使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式
  
  当我们导入 vue 包之后，就可以去实例化一个 vm。

/*
回顾 包的查找规则：
        找项目根目录中有没有 node_modules 的文件夹
        在 node_modules 中 根据包名，找对应的 vue 文件夹
        在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
        在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
    通过在找到的文件中可以看到 mian 属性的值引入的是一个不完整的 .js 文件，因此我们需要重新修改main属性值
    修改方法：
        1.可以直接修改 main 属性为   "main": "dist/vue.js",
        2.可以重新在 main.js 文件中重新引入  import Vue from '../node_modules/vue/dist/vue.js';
*/
var vm = new Vue({
    el:'#app',
    data:{ msg:123, },
});

• 接下来我们需要在 src 目录下创建一个 login.vue 文件

注意：该文件中有三部分：template、script、style

<template>
    <div>
        <h4>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h4>
    </div>
</template>

<script></script>

<style></style>

• 在 main.js 文件中导入 login.vue 文件

import login from "./login.vue";

• 在 vm 实例中使用 render 方法渲染导入文件中的组件

var vm = new Vue({
    el:'#app',
    data:{ msg:123, },
    render: function (createElements) {
        //注意：如果想要通过vue把组件放到页面中去， vm 实例中的render 函数可以实现，return返回的结果将取代 el 中的容器。
        return createElements(login);
    }
});

注意：当以上流程执行完毕后，如果执行 cnpm run dev 报如下错误时，属于插件问题。

解决方法：需要在配置文件中进行如下配置即可：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}