webpack的插件使用，以及引入vue文件的注意事项

一、html-webpack-pugin插件
html-webpack-plugin插件：打包时复制根目录index.html文件到dist文件夹的插件-->1.  找到需要使用插件并安装他
    命令：npm install --save-dev  html-webpack-plugin
2.  在webpack.config.js中引入他
    const   HtmlWebpackPlugin=require('html-webpack-pligin')
3. 在plugins选项中调用他，并按照他的文档中区做配置 //插件，将index.html文件自动打包到dist文件夹里面  plugins:[ //自动生成一个index.html文件在出口位置，并且会自动在生成的文件中引入打包的js文件 new HtmlWebpackPlugin({filename:'重命名文件',template:'./index.html',}); ]

二、copy-webpack-plugin插件
copy-webpack-plugin插件：打包时复制lib文件夹到dist目录的插件-->copy-webpack-plugin

1.  找到需要使用插件并安装他
    命令：npm install --save-dev  copy-webpack-plugin
2.  在webpack.config.js中引入他
    const   CopyWebpackPlugin=require('copy-webpack-plugin')
3.  在plugins选项中调用他，并按照他的文档中区做配置
    plugins:[new CopyWebpackPlugin([{from:'需要复制文件的路径', to:'需要放在的位置路径'}])]
4.　注意这个插件的参数必须是一个数组里面包含一个对象。否则会报错

vue文件的引入

import Vue from 'vue';默认不ok?
首先我们要知道 这段代码引入的是什么

　1. 具体找到 node_moduels 下面的vue文件夹

　2. 找到package.json中 main 和 moudule选项的值

　3. 如果 通过 commonJS require的方式引入vue。引入的是main选项指定的文件。

　4. 如果 通过 esm inport的方式引入vue。引入的是module选项指定的文件

　　

　查看后发现不论是main还是moudule引入的文件都是vue.runtime文件，只能使用render函数渲染模板

vue.common.js   commonJs规范暴露    require方式引入
vue.esm.js esm规范暴露  import方式引入

vue.runtime     运行时的版本------------>使用render函数渲染模板
vue没有.runtime 运行时+编译器的版本------>组件是使用template形式渲染模板只能用这个版本，也叫完整版

修改引入的vue文件为完整版的esm版本(实质就是修改引入vue时使用的路径)
请不要直接修改node_moduels下面的vue文件名，通过webpack配置文件修改别名
在webpack.config.js文件中
            -   //解析
                resolve:{
                    //别名vue/dist/vue.esm.js->a
                    alias：{
                        a:'vue/dist/vue.esm.js'
                    }
                }

 

转载于:https://www.cnblogs.com/boye-1990/p/10388196.html