webpack的安装与配置

    虽然33+岁了,但为了生活还得必须不断地学习,避免被饿死,生活就是这么残酷,也不知道今天学的以后还用不用得上。前段时间学习了spring系列,算是入门了。现在准备好好学一下vue的开发,做了这么多年前后端,也没做过大型的vue项目,感觉是该学习一下。不错的框架。

     安装了nodejs,然后蒙蒙顿顿npm安装了webpack 4.4版本,打开webstorm写了几个js。准备webpack ./src/xxx.js  /dist/sss.js的时候报错了。完成和视频上的不一样。视频上面的webpack版本低。与是看了看官网,要配置,也不知道怎么配置。找了一篇文档,摘录了部分记下来,虽然记录这些东西有点浪费时间,但为了以后需要的时候找不到解决方案,也就记下了:

     安装nodejs不用说了,js的运行环境,找个单独的目录,以后好管理。然后全局安装webpack,npm install webpack安装最新,后面加@可以指定版本。有项目了再项目里搞一个局部安装,为什么?到时候一起打包用呗

  先创建项目目录结构,根目录是mywebpack。进入项目根目录,执行:npm init,生成package.json文件,内容就是一堆json数据,基本就是在终端里输入的信息。

  进入项目根目录局部安装webpack,进入./mywebpack,执行:npm install webpack --save-dev,局部安装webpack成功了,根目录下会出现一个node_modules文件夹。进入根目录,建两个文件夹,分别为src和dist

  (1)src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。

  (2)dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。 

然后写一下js文件,html文件,自己写吧,有依赖关系就可以。在根目录新建一个webpack.config.js文件,然后开始配置:

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/index.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    mode:"development",//注意最新版本必须加mode,否则会报错
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

然后在终端输入:webpack,进行打包,之后我们就可以在disc目录下看到打包生产的bundle.js文件,并能成功运行index.html文件。就好了。会指定目录下生产打包后的js文件。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章