webpack windows路径_webpack 配置路径 路径 - CSDN
精华内容
参与话题
  • 实际路径:/page/WanHG/index.vue 在index.js中写法 const ImageList = () => import('/page/Admin/imgaeList.vue') const WanHgIndex = () => import('/page/WanhG/index.vue' 在Windows内进行build...

    如:route/index.js
    实际路径:/page/WanHG/index.vue

    在index.js中写法

    const ImageList = () => import('/page/Admin/imgaeList.vue')
    const WanHgIndex = () => import('/page/WanhG/index.vue'
    

    在Windows内进行build不会报错,因为Windows忽略路径的大小写。但是Linux下会报错,提示无法找到文件。

    因此在配置路由时,一定要保证index.js中与路径写法一模一样

    展开全文
  • windows下安装nodejs、webpack及打包步骤

    万次阅读 2017-11-30 15:26:05
    一路下一步,记住安装路径(此处安装在 D:\Program Files\nodejs 下)。 安装完成后运行cmd,执行node -v和npm -v命令查看安装情况。如执行结果如下图,说明安装成功。 (执行完该命令后,nodejs安装目录
    
    

    1.下载Node.js

    https://nodejs.org/en/,左侧为稳定版,右侧为最新版,推荐稳定版。


    2.安装Node.js

    一路下一步,记住安装路径(此处安装在 D:\Program Files\nodejs 下)

    安装完成后(需要配置环境变量:新建NODE_PATH,取值为node的安装路径,如:E:\Program Files\nodejs\node_modules)运行cmd,执行node -vnpm -v命令查看安装情况。如执行结果如下图,说明安装成功。

    (执行完该命令后,nodejs安装目录下会自动生成文件夹node_global,若未生成则手动创建)


    3.配置npm的全局模块的存放路径以及cache的路径

    可使用Node.js的安装路径,在此路径下建两个文件夹node_globalnode_cache

    然后执行如下命令:

     npm config set prefix "D:\Program Files\nodejs\node_global" 回车

     npm config set cache "D:\Program Files\nodejs\node_cache" 回车


    然后可以输入指令查看:

     npm config get prefix 回车

     npm config get cache 回车


    4.配置环境变量【****】

    4.1 控制面板-系统和安全-系统-高级系统设置-高级-环境变量,

    新建【系统变量】

    变量名:NODE_PATH

    变量值:D:\Program Files\nodejs\node_global\node_modules

    (即步骤2全局模块的存放路径,亲测实际应该是D:\Program Files\nodejs\node_global\)

    4.2 再将【用户变量】下的path值后追加:

    D:\Program Files\nodejs\node_global

    (亲测实际在【系统变量】中的path中也追加了NODE_PATH的相同路径,即D:\Program Files\nodejs\node_global)


    至此,便可使用 npm 安装相关模块,如安装最常用的 express 模块进行测试:

     npm install express -g 回车




    5.尝试安装模块bower

    执行命令:

      C:\>npm install bower -g-g指安装到node_global文件夹中,-g前有一个空格

    若-g前没有空格,错误安装结果为


    安装成功后,将看到node_global文件夹下新增文件夹 node_modules>bower

    然后执行 bower -v。(若报错bower不是内部或外部命令,则是因为环境变量未配置好)



    6.初始化npm

    重新运行cmd(命令行创建子文件夹方法:mkdir webpack-test),初始化npm:

     npm init 回车。

    一路回车(则将会以默认参数创建初始化json文件package.json)。



    7.安装webpack

    首先需要安装一个全局webpack:

     npm install webpack -g 回车

    这样才可以正确使用webpack的命令;然后还可以在当前项目里也安装一个webpack,这是官方推荐的做法:

     npm install webpack --save-dev 回车

    (此处我只安装了全局webpack,即只执行了第一步,并未影响)

    安装完成后在执行 webpack 测试时极易出错提示 webpack不是内部或外部文件。解决方法:建议在检查环境变量(NODE_PATH、Path)是否有问题之后,删除已安装的webpack重新进行 -g 全局安装。



    webpack测试成功后,可进行步骤8:


    8.使用webpack打包hello.js测试文件

    对示例文件hello.js进行打包:

      D:webpack\webpack-test>webpack hello.js hello.bundle.js 回车


    成功后在webpack-test文件夹下会生成打包后的js文件hello.bundle.js:


      

    至此,nodejs/npm的安装、webpack的安装、打包过程简易介绍到此,如有偏颇请指出,敬请期待后续更新。


    展开全文
  • # {extry file}出填写入口文件的路径,本文中就是上述main.js的路径, # {destination for bundled file}处填写打包文件的存放路径 # 填写路径的时候不用添加{} webpack {entry file} {destination for bundled ...

    1、用命令行打包

    webpack可以在终端中使用,在基本的使用方法如下:

    # {extry file}出填写入口文件的路径,本文中就是上述main.js的路径, 
    # {destination for bundled file}处填写打包文件的存放路径 
    # 填写路径的时候不用添加{} 
    webpack {entry file} {destination for bundled file}
    

    指定入口文件后,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack不是全局安装的,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址。

    # webpack非全局安装的情况

    .\node_modules\.bin\webpack .\app\main.js -o .\public\budle.js

    2、配合配置文件进行打包

    在根目录下新建一个名为webpack.config.js的文件,我们在其中写入如下所示的简单配置代码,目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

    module.exports = { 
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 
        output: { 
            path: __dirname + "/public",//打包后的文件存放的地方 
            filename: "bundle.js"//打包后输出文件的文件名 
        } 
    }
    

    有了这个配置之后,再打包文件,只需在终端里运行webpack(非全局安装需使用.\node_modules\.bin\webpack)命令就可以了,这条命令会自动引用webpack.config.js文件中的配置选项,示例如下:

     

     

    3、使用npm start 打包代码

    npm可以引导任务执行,对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可,设置方法如下。

     

    我们在命令行中输入npm start试试,输出结果如下:

     

     

     

    或者

    在命令行中npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}如npm run build,

    修改如下:

     

    执行命令如下:

    展开全文
  • 当我安装了webpack,在命令行输入webpack -v结果发生报错,webpack不是内部命令,当时在往上找到了一个解决办法。也真正解决了问题;方法如下: 1、安装node; 2、如果你忘记了node的安装目录,没关系,在命令行...

    当我安装了webpack,在命令行输入webpack -v结果发生报错,webpack不是内部命令,当时在往上找到了一个解决办法。也真正解决了问题;方法如下:
    1、安装node;
    2、如果你忘记了node的安装目录,没关系,在命令行输入path;
    path
    如果你设置过node的环境变量,这里一定会有显示;这样我们看的出我的node安装在了C:\Program Files\nodejs\目录下了;
    3、配置一下npm的路径,这里主要是配置npm的全局存放路径和缓存路径;

    npm config set presfix "C:\Program Files\nodejs\node_global"
    npm config set cache "C:\Program Files\nodejs\node_cache"

    4、这样设置好了npm的全局存放目录后,用npm在全局安装webpack;
    npm install webpack -g
    5、安装好之后,接下来修改环境变量,右键我的电脑——属性——高级系统设置——高级——环境变量;
    node_path

    新建一个NODE_PATH的键,输入上面定的全局存放路径;

    path

    同时在path中的路径也要添加与NODE_PATH一致的路径,注意:path路径如果有多条,那么注意一下你以前是不是设置过全局存放路径,如果设置过,请修改,或者放在之前设置的全局存放目录前;

    6、全部工作到这里已经完成,接下里我们来验证一下是否解决掉了问题,若果没有,请按照上述步骤逐一排查,查看是不是哪一步出了错误;
    webpack -v

    展开全文
  • 一、安装webpack 1、安装最新的node.js;最新的node.js包括了npm,并且是全局安装的; 2、建立开发目录; 3、DOS命令下,进入第二步建立的目录,并运行 npm init命令,建立package文件; 4、打开package文件,...
  • 彻底理解并解决 'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件一、问题描述二、分析原因三、解决方案四、方案对比 一、问题描述 在安装 npm 包模块的时候,不管是 Webpack 、React 还是 Vue,都...
  • webpack打包后图片显示问题

    千次阅读 2018-05-04 13:22:42
    1、先解释一下这段配置代码的意思,test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,然后通过url-loader进行处理,不大于10kb就会进行base64转码,就是将图片转为base65格式,如果超过10KB的图片...
  • 尝试着学习webpack,但总是说webpack不是内部命令,我是这样做的(事先已经安好了node和npm): 1.先在命令行执行 npm config set prefix “d:\node\node_global”设置全局路径 2.再执行 npm install webpack -g 在...
  • 最近想尝试一下使用Webpack按照网上和书籍上进行Webpack的安装,当执行webpack命令的时候会出现Cannot find module 'webpack-cli/package.json'。经过检查webpackwebpack-cli都已经安装成功了。但是就是执行...
  • Windows下使用webpack入门

    万次阅读 2017-04-14 22:18:26
    Windows下使用webpack入门 1. webpack的打包示意图理解: 2. 前期准备 安装node 新建一个文件夹:webpack_test 3. 安装并使用webpack (1)在命令行下进入文件夹:webpack_test中,并初始化: (2) 在当前文件...
  • webpack-dev-server的安装

    万次阅读 2018-09-18 19:38:26
    webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时. 注意:webpack-dev-server是一个独立的NPM包...
  • webstorm对webpack中resolve进行智能提示

    千次阅读 2017-12-12 10:54:15
    我们会经常用一些本地的库,然后在webpack中利用resolve中的alias给指定库路径起别名,这样在项目中就可以像引用node_modules里的库一样引用它,当然默认webstorm会对引用node_modules里的库有提示作用,而对resolve...
  • webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法前言很久没有更新关于webpack+vue的内容了。前面承诺过大家告诉大家如何打包到子目录的。由于太忙,也忘记了。今天补充两个知识点给大家。将接口配置...
  • Create-React-App的Webpack配置

    万次阅读 2018-05-10 11:00:12
    随着工程的扩大,单页面应用已经不能适应工程开发的需要了,而create-react-app默认生成的是单出口单入口生产环境,所以我们需要对我们的工程做出一些修改来符合当前的开发进度。 工程修改 ...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大...为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可...
  • 转自:http://www.cnblogs.com/meij/p/5208214.html当你在windows系统的dos下执行:webpack命令时在dos下出现 “Cannot find ...解决方法是:配置环境变量,指定webpack/lib/node/NodeTemplatePlugin的准确路径;1.右键
  • Webpack入门

    万次阅读 2016-08-11 11:24:47
    Webpack 是什么webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 简单说就是模块加载器,通过使用Webpack,能够像Node.js一样...
  • 目标: 本文依赖自己的个人经验,简要介绍一下ReactJS+Tomcat的开发方式,经过团队试用,觉得比较好。主要得益于ReactJS的开发方式和webpack工具的使用,结合强大的代理,...Webpack: Webpack可以使用webpack dev se
  • windows10 系统安装node.js和webpack

    千次阅读 2018-05-04 19:19:45
    一、安装webpack1、安装最新的node.js;最新的node.js包括了npm,并且是全局安装的;下载地址https://nodejs.org/en/,左侧为稳定版,右侧为最新版,推荐稳定版。2.安装Node.js一路下一步,记住安装路径(此处安装在 ...
  • windows 使用npm安装webpack 4.0

    千次阅读 2018-03-03 00:42:29
    1、安装NodeJS首先需要安装nodejs点击如下链接https://nodejs.org/en/download/点击打开链接选择Windows Installer点击下载,下载完成之后点击安装包进行安装,点击运行点击next点上√,然后点击Next选择安装目录...
1 2 3 4 5 ... 20
收藏数 4,092
精华内容 1,636
关键字:

webpack windows路径