webpack的简单的介绍

• 首先这是我自己看的官方的文档及百度理解的简单的webpack的使用，webpack可以将我们的多个文件进行打包，变成一个文件或多个不同的输出文件，还可以将我们一般使用的ts、scss等预编辑器进行转化为js、css让我们的浏览器能进行一个识别和编译

• 话不多说，直接上菜，需求：我在没有用到框架的情况下，不想再HTML页面引入一大堆的js文件，只引入一个js文件，我们可以使用es6中的模块化导入导出，但是js好像是对es6不太友好，这时我们就可以使用webpack来进行简化我们的代码啦！

• 看我的创建导航菜单

1.png

• 电脑上要先安装node，没有的话先去官网安装，之后再进行安装

  cnpm init 一路回车第一个是项目名，之后回车就可以，我们可以在这个文件中进行指令的配置，如打包指令等可以上百度查一下
 cnpm  install  webpack    webpack-cli   --save-dev

• 创建一个webpack.config.js文件，在里面进行配置

const path = require('path');
const config = {
    mode:'development',//这时本地环境，还有生产环境producent，单词忘了
    //这是只有一个主文件入口的时候写法，在src文件夹下的index.js为主文件
    entry:"./src/index.js",
    //这是app的主文件和第三方库的入口是分离的，两个入口
    // entry:{
    //     app:"./scr/app.js",
    //     vendors:"./src/vendors.js"
    // }
    //这是有多个入口文件的写法
    // entry:{
    //     pageOne:"./src/index.js",
    //     suibianxie:"./src/two.js",
    //     zidingyi:"./src/three.js"
    // }
    /**
     * 输出，path输出的目标绝对路径，filename文件名
     * 不管有多少个入口文件，输出只有一个
     */
    output:{
        filename:"main.js",//输出的文件名为main.js
        // filename:"[name].js",//这是会生成app.js和vendors.js,还有我们生成的多个页面pageOne.js等
        path:path.resolve(__dirname,"/dist")//在当前根目录下的dist文件夹下
    },
    // module:{
    //     rules:[//这是将模块的源码进行转换，要先下载css-loader,ts-loader
    //         //还有我们的scss预处理器等，都要先下载，在这里进行配置，将scss转换为css
    //         {test:/\.css$/,use:"css-loader"},
    //         {test:/\.ts$/,use:"ts-loader"},
    //         //也可以进行设置
    //         {
    //             test:/\.css$/,
    //             use:[
    //                 {loader:"style-loader"},
    //                 {
    //                     loader:"css-loader",
    //                     options:{
    //                         modules:true
    //                     }
    //                 }
    //             ]
    //         }
    //     ]
    // },

    // devServer:{//开发服务器配置
    //     contentBase:"./dist",//指向打包的目录
    //     prot:3000,//服务端口号
    //     progress:true,//打包进度
    //     open:true,//是否打开浏览器
    //     compress:false//是否压缩
    // }
}

module.exports = config ;

• 在src文件夹下有两个js文件

• two.js

module.exports=function(){
    var obj={
        x:'我是two.js文件中的数据，引入到index.js中',
        y:'通过webpack的output输出为dist下的index.js在index.html中引入'
    }
    return obj;
}

• index.js

var two=require('./two.js');
console.log(two());
var arr=['我是index.js文件中的数据','我要通过webpack打包','在dist下的index.js中输出'];
console.log(arr);

• 此时可以将我们写好的webpack进行打包了

npx webpack

• 在index.html页面中进行引入就可以了

<!-- 由于dist是绝对的路径，所以前面不能加./，这样会出不来 ,要加个/就可以了-->
    <script src="/dist/main.js"></script>

• 这样简单的webpack就打包好了，你学会了吗？