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

Posted 2020-11-16 qqhfeng

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执行编译，大功告成。