【前端交流】Vue框架环境搭建问题一

[_明月]

各位网友的，大家好。在这里，我向大家请教一个Vue框架环境搭建问题，希望能够得到各位的帮助。谢谢

我在使用Sublime Text 3进行Vue开发过程中，遇到一个问题。在Sublime Text 3编译器中手动建立了一个项目，之后在PowerShell中，使用webpack命令编译，显示webpack命令不可识别。

图片1为我在Sublime Text 3中手动建立的一个项目。

图片1

图片2为我自己电脑(Win10系统)中使用PowerShell工具，以webpack命令编译01_cal_es6_module项目(我不知道自己的这句话描述的对不对)。

图片2

我根据这篇文章：http://blog.csdn.net/u013446264/article/details/51114276 ，将node.js的全局webpack配置成功。并在系统环境变量、用户环境变量中添加了对应的路径。

PowerShell中使用webpack命令还是不行！

希望能够得到各位的帮助，谢谢大家。


在最后分享一首我喜欢的诗

题临安邸

林升 [宋]

山外青山楼外楼，西湖歌舞几时休？

暖风熏得游人醉，直把杭州作汴州。

[_明月]

2017年，真的是一个难熬的一年！

[_明月]

经过Python运维高手指点，问题得以解决！

在配置Node.js环境变量中，用户环境变量配置有误。其正确路径应该为： D:\Node_JS\node_global

[_明月]

在这里，问一个问题：Cannot find module 'html-webpack-plugin'

在PowerShell中，webpack命令可以使用了。但是为什么在编译运行项目时，出现了：Cannot find module 'html-webpack-plugin' 这个问题呢？

根据提示，其显示说：没有找到“'html-webpack-plugin'”! ！ ！

我根据视频教程，所创建的文件目录是：

我所写的webpack.config.js文件如下：

    const htmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path')
    module.exports = {
        entry:{ //main是默认入口,也可以是多入口
            main:'./src/main.js'
        },
        //出口
        output:{
            filename:'./build.js', //指定js文件
            path: path.join(__dirname,'dist')          //最好是绝对路径
            //代表当前目录的上一级的dist
        },
        module:{
            //一样的功能rules:   webpack2.x之后新加的
            loaders:[       //require('./a.css||./a.js')
                {test:/\.css$/,
                 loader:'style-loader!css-loader',
                 //顺序是反过来的2!1
                },
                {
                 test:/\.(jpg|svg|png|gif)$/,
                 loader:'url-loader?limit=4096&name=[name].[ext]',
                 //顺序是反过来的2!1 
                 //[name].[ext]内置提供的，因为本身是先读这个文件
                 // options:{
                 //    limit:4096,
                 //    name:'[name].[ext]'
                 // }
                },{//处理ES6的js
                    test:/\.js$/,
                    loader:'babel-loader',
                    //排除 node_modules下的所有
                    exclude:/node_modules/,
                    options:{
                        presets:['es2015'],//关键字
                        plugins:['transform-runtime'],//函数
                    }
                }
            ]
        },

        plugins:[
            //插件的执行顺序是依次执行的
            new HtmlWebpackPlugin({
                template:'./src/index.html',
                })
                //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
        ]



    }

有网友能够回复一下么？ 谢谢啦

[当作看不见]

webpack 是要全局安装的, npm install webpack -g 会自动添加shell 命令 ,如果不是的话,就会需要手动配置 找不到模块 的原因是你没有安装 这个模块 npm install html-webpack-plugin --save-dev 就可以解决了 配置文件中你是引用了对应的模块的 const htmlWebpackPlugin = require('html-webpack-plugin'); 引用了这个. 还有 line:44

[_明月]

引用 4 楼 qq_29594393 的回复:

webpack 是要全局安装的, npm install webpack -g 会自动添加shell 命令 ,如果不是的话,就会需要手动配置 找不到模块 的原因是你没有安装 这个模块 npm install html-webpack-plugin --save-dev 就可以解决了 配置文件中你是引用了对应的模块的 const htmlWebpackPlugin = require('html-webpack-plugin'); 引用了这个. 还有 line:44

嗯，谢谢您。我的webpack的全局安装、环境搭建已经弄好了。 在powershell中出现的“Cannot find module 'html-webpack-plugin'”问题还没有解决。 我用你的办法尝试一下，谢谢您。