webpack构建的项目中导入包的三种方法

2018-09-22  本文已影响0人  IT小池

如:在webpack中导入 vue ,下面三种方法,先使用
npm i vue -D 安装

1.修改包配置文件

使用

import vue from 'vue';

如上这样使用 import 方式引入包时,执行时会自动找路径是 node_modules/vue/package.json 文中的 main配置的路径,如:
找到根目录下的 node_modules/vue/package.json 包配置文件 ,打开后找到它,如下这样:

  "main": "dist/vue.runtime.common.js",

此时,可以看到加载的部署我们要的原装 vue.js文件,我们可以在这修改它的配置路径,如:

 "main": "dist/vue.js",

此时,就ok了

2.修改入口导入文件路径

在入口文件中,导入包时,可以直接使用路径

 import vue from './node_modules/vue/dist/vue.js';

此时,也ok了

3.修改 webpack.config.js 配置文件

在根目录配置文件 webpack.config.js 中,加入如下:

resolve:{
     alias:{
          // 修改 vue 被导入时的路径    $ 表示以 vue 结尾
          "vue$":"vue/dist/vue.esm.js"
          // 给根目录下的 src 目录配置别名。方便引入文件
          // 注意:在模板组件中的 <style>引入样式 需要加 ~ 波浪线
          // 如:import '~@css/style.css'
          "@": resolve("src")
     }
}

此时,还是ok了。

上一篇 下一篇

猜你喜欢

热点阅读