WEBPACK4打包总结（包含VUE打包）

webpack4

    什么是webpack

       webpack是一个用于打包js文件的软件。

特点

       对于打包后的js文件其有如下特点：

1. 指令兼容
2. 减少文件数量

下载webpack

              npm init -y

              npm i webpack webpack-cli -D -g

指令说明：https://www.cnblogs.com/itlkNote/p/6830682.html

webpack简单打包

    指令打包

       webpack 将要打包的文件  --output 打包文件名

注意：如果js文件中使用require引入了另一个js文件那么webpack会自动搜索并一起打包。

    配置文件进行打包

1. 新建一个文件:webpack.config.js
2. 写入代码：

module.exports={

        entry : ”main.js”,//入口文件（你要打包的文件）

        output : {//出口文件

       filename:”build.js”,//文件名

       path:__dirname + “/dist”//路径，__dirname表示当前路径

}

}

1. 执行cmd指令：webpack

css文件打包

    下载库

       npm i style-loader css-loader -D

    webpack.config.js文件配置

module.exports={

   entry:’打包文件的路径’,

   output:{

   filename:’打包后文件的名称’，

   path:__dirname+’文件夹’//__dir表示当前路径

},

module:{

   rules:[

            {

                 test:/\.css$/,

                 use:[‘style-loader’,’css-loader’]

}

]

}

}

    执行指令：webpack

打包url资源

    下载库

       npm i style-loader css-loader file-loader url-loader -D

 

    webpack.config.js文件配置

       module.exports={

              entry:’打包的入口文件’,

              output:{//出口文件

       filename:’文件名’,

       path:’文件路径（必须绝对路径）’

},

module:{

       rules:[

       {

              test:/\.css$/,

              use:[‘style-loader’,’css-loader’]

},

{

       test:/\.(png|gif|jpg)$/,

       use:[

              {

                     loader:’url-loader’,

                     options:{

       limit:20000 //单位为B

}

}

]

}

]

}

}

 

    执行：webpack

ES6转ES5

下载库

       "babel-core": "^6.26.3",

    "babel-loader": "^7.1.5",

    "babel-plugin-transform-runtime": "^6.23.0",

"babel-preset-env": "^1.7.0",

参考上述

配置package.json文件

加入字段：

  "babel":{

    "presets": ["env"],//表示转换格式

    "plugins": ["transform-runtime"]//确保vuejs可行

  }

      

配置webpack.config.js文件

       module.exports={

       entry:’打包文件入口’,

       output:{

       filename:’文件名’,

       path:’绝对路径’

},

module:{

       rules:[

              {

                     test:/\.js$/,

                     exclude:/node_modules/, //排除文件夹

                     use:[‘babel-loader’]

}

]

}

}

 

执行：webpack

vue模板文件打包

    下载：

       npm i -D …

"vue-loader": "^15.4.0",

     "vue-template-compiler": "^2.5.17",

        "style-loader": "^0.22.1",

     "file-loader": "^1.1.11",

 

       npm i -save vue

 

    配置文件

     hello.vue:

       <template id="c1">

  <div class="app">

    <h1>{{t}}</h1>

  </div>

</template>

 

<script>

  export default {

      data(){

        return{

          t:'hello World!!'

        };

      },

      methods: {

 

      }

  }

</script>

 

<style>

  .app{

    color: red;

  }

</style>

 

main.js//入口文件引用

 

import Vue from "vue";//引入核心文件

import temp from "../templates/hello.vue"//引入组件文件

 

var vm = new Vue({

       el:'#app',

       data:{

              //添加一些数据

       },

  render(cl) {//使用作为根组件

    return cl(temp);

  },

       methods:{

              //添加一些方法

       }

})

 

     webpack.config.js

       var vue_loader_plugin = require(“vue-loader/lib/plugin”);//配合vue加载器的辅助插件

       //“这个插件是必须的！“它的职责是将你定义过的其它规则复制并应用到.vue文件里相应语言的块

module.exports={

              entry:”main.js”,//入口

              output:{

       filename:”index.js”,

       path:__dirname+”/dist”

},

module:{

       rules:[

       test::/\.vue$/,

       use:[‘style-loader’,’vue-loader’]

]

},

plugins:[

       new vue_loader_plugin()//使用引入的插件

]

}

执行：webpack

 

 

 

热重载

    下载：

                  "html-webpack-plugin": "^3.2.0",

                 "webpack": "^4.16.5",

               "webpack-cli": "^3.1.0",

                "webpack-dev-server": "^3.1.5"

配置文件

     package.js

       添加代码：

         "scripts": {

    "test": "webpack-dev-server --inlink --hot --port 3333"

  },

      

       --inlink 表示自动打开浏览器

       --hot表示自动刷新

       --port表示端口

       --host表示主机地址

 

    使用html-webpack-plugin插件

       提示：以下操作都处于webpack.config.js文件中

 

       第一步：引入插件：

              var cj = require(“html-webpack-plugin”);

       第二步：使用插件：

              plugins:[

       new cj(options)

]

              options:

                     类型：objcet

                     参数：

                            filename:渲染后文件名

                            template:网页模板路径

                            title：网页名称

 

执行指令：npm run test

              说明：test是前面scripts里的属性