关于webpack登堂入室的必经之路（1）

基本目录结构如图所示：

介绍：webpack的配置文件都是写在 webpack.config.js  文件下，这个文件位于 项目的跟目录下面，在 终端中运行  "webpack"命令，webpack就会自动执行这个文件中的配置，打包文件，并输出。（他可以打包  css，less，图片等所有静态文件到js中）

前提： 利用  npm 全局安装了 webpack ，并且在项目下面局部安装了 webpack。

如果没有  在项目根目录打开终端，运行命令 ：

全局安装： npm i -g webpack

局部安装：npm i --save-dev webpack

一、开始打包最简单的输入输出文件（这是webpack官网的一段代码）；

 

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

解析：path 是 node中的一个模块，用来处理文件的路径。

path.resolve(__dirname,'dist')//表示当前目录下的dist文件夹。

module.exports = {},导出的是一个配置对象，这个对象里包含了对于打包代码的各种配置。比如：

entry ，指定了打包的入口文件。

output，指定了打包的出口文件，但是filename是输出的文家名字，path是输出到哪个目录，必须是绝对路径。所以使用  path处理路径 比较方便。

这是一个最简单的例子，从app路径下的index.js开始打包。输出到 指定路径下。

因为默认webpack只能打包处理 js文件，所以：

需要很多loader（处理器），去处理其他的文件，例如： css ，图片文件，less等

 二、下面我们开始解析 webpack深层次的东西（以我自己的demo为例）。

（ps:项目结构文章最开始的图片上已经给出，不再赘述）

A：需求：需要将css样式打包进 入口文件中

代码如下：

const path = require('path');

module.exports = {
    entry: {
        main: './src/script/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    module: {
        rules: [
          
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",// translates CSS into CommonJS
                    }, {
                        loader: "postcss-loader",
                    }
                ],
              
            }
        ]
    }
}

解析： 我们要处理css，需要 css-loader 和 style-loader。css-loader是让webpack可以打包 css文件类型，而style-loader是把wenpack解析好的样式以  <style></style>标签的形式插入到页面中。

需求B: 如何让  我们打包的js  css等文件自动插入到输出的页面中呢？

（ps：这里我们需要一个插件 ： html-webpack-plugin）

通过  npm安装这个插件的命令为：

	npm i --save-dev html-webpack-plugin

代码如下所示： 

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

module.exports = {
    entry: {
        main: './src/script/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                 {
                 loader: "style-loader"
                 }, {
                 loader: "css-loader",// translates CSS into CommonJS
                 }
                 ],
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.bundle.html'
        })
    ]
}

解析： 

插件使用：第一步：require（‘。。。’）是把下载好的插件引入到js中。

第二部：在plugins的数组中 new一个新对象，并且传入相关的参数即可。

（ps：template是  以哪个文件为模板插入生成，filename是生成后的文件名字）

需求C ： 使用webpack 处理 less文件 

代码如下：

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

module.exports = {
    entry: {
        main: './src/script/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [{
                 loader: "style-loader"
                 }, {
                 loader: "css-loader",
                 }, {
                 loader: "less-loader"
                 }]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.bundle.html'
        })
    ]
}

解析： 此时 需要less的环境和less-loader去解析。运行 npm命令安装

	安装less和less-loader ： npm i --save-dev less less-loader

	其中是匹配以  .less 结尾的文件  交给  less-loader处理。

	less-loader处理完之后生成的css样式，再交给 css-loader处理，css-loader处理完之后生成style样式，再用

	style-loader处理插入到页面中。

需求 D ： 打包图片：（这里只给出书写格式，需要 url-loader需要自己下载，若不明确，从开始阅读安装步骤）

代码示例： 

module.exports = {
    /*。省略。。*/
    module: {
        rules: [
            
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                    }
                ]

            }
        ]
    }
    /*。。省略。*/
}

需求 E:  处理  Vue 单文件 ，以及 VUe项目整体架构的配置文件

示例代码： 

const path = require('path');
//将打包好的js自动引入 html中的插件
const htmlWebpackPlugin = require('html-webpack-plugin');
//引入局部webpack
const webpack = require('webpack');
//分离css less单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    entry: { //打包入口
        main: './src/script/main.js'
    },
    output: {  // 打包出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    module: {  //打包的规则设置
        rules: [  //规则（就是指定不同的文件用哪个处理器处理）
            {
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader',
                    options: {
                        extractCSS: true
                    }
                }],

            },
            {                     
                /*注意:当use下面有多个loader时，loader处理文件的顺序自下向上，也就是说，
                最开始写的loader最后处理文件*/
                test: /\.css$/,
                /*use: [    
                 {
                 loader: "style-loader"   //插入style样式到  页面中
                 }, {
                 loader: "css-loader",// 打包css文件生成  style样式
                 }, {
                 loader: "postcss-loader",  //给 css样式加上各个浏览器的兼容前缀
                 }
                 ],*/
                //分离css的插件，若不分离 删除这个use的内容使用此注释上边的那个  use即可。
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            },
            {
                test: /\.less$/,
                /*use: [{
                 loader: "style-loader"
                 }, {
                 loader: "css-loader",
                 }, {
                 loader : "postcss-loader",

                 },{
                 loader: "less-loader"
                 }],*/
                use: ExtractTextPlugin.extract(['css-loader','less-loader'])
            },
            {
                /*将es6转换成es5的loader*/
                test: /\.js$/,  
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['latest'] //按照最新的ES6语法规则去转换
                        }
                    }
                ]
            },
            {  /*处理图片的loader*/
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                    }
                ]

            }
        ]
    },
    plugins: [  //插件的使用
        /*自动引入js或者css到html的插件*/
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.bundle.html'
        }),
        /*分离css的插件*/
        new ExtractTextPlugin("style1.css"),
    ]
}

补充：本demo中  main.js的代码如下所示：

'use strict'

import '../style/style.less';

import main from '../components/main.vue';

import Vue from 'vue'

import '../style/test.css'

import '../style/test2.css'


var vm = new Vue({
    el : '#app',
    render: h => h(main)
});

剩下的就交给你了，技术的路上一路有你们。阿里路亚，感谢神。

耶稣爱你，我也爱你。  good luck！