码迷,mamicode.com
首页 > Web开发 > 详细

webpack集成vue单文件模式的很多坑(研究了1个星期)

时间:2019-09-27 10:19:21      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:package   编译失败   入口   das   source   成功   配置文件   插件   webpack   

1、一开始不知道局部安装webpack后,如何调用webpack. 后来看说明文档(webpack中文网)才知道,有个npx可以启动本地安装的webpack.

我估计:全局安装webpack,全局的webpack无法调用我的本地安装的很多包,以至于总是编译失败。

因此卸载全局包:npm uninstall -g webpack    ; npm uninstall -g webpack-cli

npm安装模块

  • 【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录;

  • 【npm install -g xxx】利用npm安装全局模块xxx;

  • 【npm install xxx】安装但不写入package.json;

  • 【npm install xxx –save】 安装并写入package.json的”dependencies”中;

  • 【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中。

npm 删除模块

  • 【npm uninstall xxx】删除xxx模块;
  • 【npm uninstall -g xxx】删除全局模块xxx;

2、修改配置文件,增加一个对vue-loader的插件

具体内容如下:

const path = require(‘path‘);
//要想vue成功必须加这一句话和插件里面的话
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);


module.exports = {
  // JS 执行入口文件
  entry: ‘./main.js‘,
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: ‘bundle.js‘,
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, ‘./dist‘),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [‘vue-loader‘],
      },
      {
        test: /\.css$/,
        use: [ ‘style-loader‘, ‘css-loader‘ ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ],
  devtool: ‘source-map‘,
  mode:‘development‘
};

3、在本地安装各种各样的loader

使用命令 npx webpack执行编译,大功告成。

 

webpack集成vue单文件模式的很多坑(研究了1个星期)

标签:package   编译失败   入口   das   source   成功   配置文件   插件   webpack   

原文地址:https://www.cnblogs.com/qqhfeng/p/11595958.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!