阅读 114

【javaScript】搭建一个webpack的项目

初级理解什么是webpack

webpack是一个打包器(bundler) ,它能将多个js文件打包成一个文件(其实不止能打包js文件,也能打包其他类型的文件,比如css文件,json文件等)

加深理解(参考他人)

前端没有模块化的概念,web帮忙实现前端js模块化

浏览器在解析js时的盲点

  • 要理解webpack是个什么东西,解决了什么问题,我们首先要理解前段的一个最大的坑,就是浏览器在解析js的时候,它有一个盲点就是,没有做到js文件的模块化。比如一个文件要想给另外一个文件暴露出去一部分数据或者一个变量,那只能将它定义在全局的作用域下,没有其他的办法。
//比如b依赖于c,a依赖于b:
<body>
    <script src="c.js"></script>
    <script src="b.js"></script>
    <script src="a.js"></script>
</body>
复制代码
  • 这种依赖关系随着项目越来越大、越来越复杂,也会变得复杂,而且依赖链会越来越长。但是最坑的地方每一个依赖里头必须暴露出来一个全局变量。这个就特别难受,解决方法:
(function(){
  window.msg ="abc"
})()
复制代码

新的隐患和解决方案

  • 通过定义全局变量,虽然可以暂时解决依赖的问题,这会带来一个新的隐患。我不知道在什么时候,用什么样的方式会把一个全局变量给覆盖掉,在不知情的情况下。如果所有的依赖都是我们自己写的,那还好,可能我们都清楚我们定义了哪些全局变量,那如果引入的是外部的库,那这个全局变量就不受我们的控制了,因为人家的库也随时可能更新的,可能后面又变了。那很难去绕开这个东西。所以无论用任何方式来定义全局变量,总有一定的可能性发生冲突。这样就特别不踏实,而且还没有什么办法。
  • 后面出现了一个node,nodejs可以直接跑在操作系统上。虽然浏览器也能跑在系统上,但是nodejs有个非常好的机制,就是在node的眼里,所有的文件都是一个模块,任何一个模块都可以有两个口,一个是入水口、一个是出水口,这样一来每个文件只需要管好两个,一个入水口一个出水口。这个就是node里面有个module,其中module.exports表示出水口,module.require表示依赖,表示入水口。
//b.js出水口
var msg ="asd";
module.exports ={mes:mes}
复制代码
//a.js入水口
var msg = require(./b.js).msg;//可以省略.js   如:require(./b).msg
复制代码
  • require(./b.js).msg明确指明我要用b文件里面的msg,exports 指明了我要导出去的变量。再也不需要全局变量这样的东西。
  • webpack它解决的最重要的问题就是这样一个问题,我们用写后端语言的方式写前端的代码,webpack可以做到动态的把后端的代码变成浏览器能够读懂的代码。即把后端代码前端化,这是最主要的,至于它打包出来的文件有多丑我们不管,只要它能用,只要它体积小就可以了。

搭建一个webpack工程环境

创建一个webpack配置环境

  • webpack.config.js
const path=require('path');
module.exports={
    //入口的js文件
    entry:{
       app:'./src/app.js'
    },
    
    //output决定目标文件夹,filename可以不要,默认源文件名
    //从入口的js文件开始,整合所有的引用模块成为一个js文件
    output:{
        path: path.join(__dirname, './dist'),
        //filename:'app_dist.js'
    },
}
复制代码
  • webpack.config.js高级功能
const path=require('path');
var HtmlWebpackPlugin=require('html-webpack-plugin');
var CopyPlugin=require('copy-webpack-plugin');

module.exports={

    //...

    plugins:[
        //注意html-webpack-plugin与webpack版本问题(两者版本不可以差太多),防止出现undefined错误
        //处理html页面,拷贝到目标文件(前面的output已经规定了目标文件夹了)
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/views/index.html'),
            //filename:'index_dist.html',
            inject:head //body head true 决定js代码加在哪里
        }),

        //注意copy-webpack-plugin与webpack版本问题(两者版本不可以差太多),防止出现undefined错误
        //处理别的格式文件,拷贝到目标文件(前面的output已经规定了目标文件夹了)
        new CopyPlugin({
            patterns:[{
                from: path.join(__dirname, 'public/test_copy_plugin.txt'),
                to:'./'
            }
            ]
        })
    ],
    
    //webpack启动前端服务8080端口,用什么响应?contentBase(保持与output规定的一致)
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080,
    }
    
    //...
}
复制代码
  • yarn add webpack -D
  • yarn add webpack-cli -D
  • yarn add webpack-dev-server -D
  • yarn add html-webpack-plugin -D
  • yarn add copy-webpack-plugin -D
  • 启动服务

package.json

  "scripts": {
    "build": "npx webpack", // yarn build 执行打包
    "dev": "npx webpack-dev-server"// yarn dev 启动端口
  }
复制代码
文章分类
前端
文章标签