webpack初级入门

Posted 2021-04-29 青工软件前端社区

webpack

ContractedDesign

●●●●

初级入门

概念

本质上，webpack 是一个现代 javascript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

特点

webpack的两大特点：1模块化 2打包
作用：
    1 、将sass/less 等预编译的css语言转换成浏览器识别的css文件
    2、  能够将多个预编译文件打包成一个文件
    3 、打包image/styles/assets/scrips/等前端常用的文件
    4 、搭建开发环境开启服务器
    5 、监视文件改动，热部署。
    6 、将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容

安装

1.前提条件

检测电脑是否安装node环境、npm、cnpm

检测：

node：node -v

npm：npm -v

cnpm：cnpm -v

2.安装

    全局安装：npm i webpack-g

    本地安装：npm  i webpack  --save -g

  

webpack的使用

前提：

•     新建一个文件夹webpackdome作为项目文件夹

•     初始化项目npm init -y 在webpackdome中生成了                      package.json

•     webpackdome中创建两个文件夹app和public

•     再创建几个文件：

              index 放入public中,main.js放入app中

 在index中引入 <script src="main.js"></script此时控制台会输出

原因:由于ES6的新语法，浏览器并不能识别某些代码片段所以此时需要webpack前端构建工具对main.js进行打包

打包的方法：

新建配置文件webpack.config.js放在根目录下，内容如下：

//entry入口   output出口

module.exports = {

        entry: __dirname + "/app/main.js",

        output: {

            path: __dirname + "/public",

            filename: "bundle.js"

        }

    }

有了这个文件只要在终端中输入webpack就可以进行打包了

更多详情可了解中文文档：https://www.webpackjs.com/