webpack基础入门

使用webpack打包的基础入门学习笔记

1.webpack安装时最好不要安装全局的，而是本地安装，因为项目如果转移到其他电脑上打包时可能不同的电脑安装的全局的webpack版本不同，可能会影响打包结果或者不能打包，安装在本地，换到其他电脑时就会使用相同版本的webpack

2.本地安装webpack

npm install webpack@4.35.2 不加版本号时会安装最新版本的

npm install webpack-cli  在安装webpack后需要再单独安装webpack-cli 这是webpack的命令，不安装这个不能使用webpack命令

3.例子：

（1）创建项目demo1  创建demo1的文件夹 然后初始换项目 npm init -y 使用所有默认设置初始化项目

然后项目中的根目录下创建文件夹src，并在src下建文件夹js,根目录下建index.html，并创建html魔板

（2）js下建bar.js文件和main.js文件

（3）bara.js文件种导出一个函数

module.exports=function(){

    console.log("this is bar module")

}

（4）main.js中调用调用这个函数

var bar=require("./bar");

bar();

（5）项目跟目录下加入文件webpack.config.js 文件，这是打包的配置文件，名字固定不能改

配置内容如下：

const path=require("path");  //引入路径插件

module.exports={

    mode:"none", //环境模式分为三种 production |  development  |  none

    entry:'./src/js/main.js',  //程序的入口

    output:{  //出口

        path:path.join(__dirname,"/dist/"), //打包文件的路径  __dirname是当前的绝对路径，拼接上打包后存放的位置 dist

        filename:"bundle.js"  //打包后的文件名称

    }

}

其中mode是打包时的环境配置 production代表生产环境打包后的js文件是被压缩的，development和none模式下打包后的文件不压缩

（6）在package.json文件种配置build指令："build":"webpack",本地的webpack不能在终端直接使用必须借助package.json中的脚本指令才行

（7）打包 npm run build

（8）最后在index.html中引入打包后的文件bundle.js 访问index页面时控制台就会输出 this is bar module