关于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');//引入局部webpackconst 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！