webpack windows下使用_windows10webpack全局安装使用教程 - CSDN
精华内容
参与话题
  • windows 安装webpack

    2019-01-09 15:35:14
    1. 去nodejs的官网下载 nodejs 并安装 ... 安装好后可以使用命令 node -v 和 npm -v来看看是否正确 的安装 3. 全局安装 webpack   命令行 : npm install webpack -g // 后面这个 -g表示全局的安装 就...

    1. 去nodejs的官网下载 nodejs  并安装

    2. 安装好nodejs后,则 npm 也会被自动的安装

               安装好后可以使用命令    node -v    和  npm -v来看看是否正确 的安装

    3. 全局安装 webpack  

               命令行 :  npm install webpack -g  // 后面这个 -g表示全局的安装    就像windows的 环境变量一样,任何目录下都可以使用

    4. webpack 4  需要安装       webpack-cli 

               所以全局安装     webpack-cli              (一定要全局安装,如果用 - D 的安装会报错)

               命令行:  npm install webpack-cli -g

                说明:

    npm install module_name -S    即    npm install module_name --save    写入dependencies

    npm install module_name -D    即    npm install module_name --save-dev 写入devDependencies

    npm install module_name -g 全局安装(命令行使用)

    npm install module_name 本地安装(将安装包放在 ./node_modules 下)

    dependencies与devDependencies有什么区别呢?

    devDependencies 里面的插件只用于开发环境,不用于生产环境

    dependencies 是需要发布到生产环境的

    webpack 的核心概念   entry (打包入口)   output(输出文件)   loaders(加载其它处理器)  plugins(插件)

              1) entry 的格式   (entry可以有三种格式,并且可以用于单入口和 多入口)

                     格式a:   

    module.exports = {
        entry:"app.js"     //表示是一个单入口 入口文件名是 app.js
    }

                   格式b:

    module.exports = {
        entry:["app.js","index.js"]    //表示是一个多入口项目   入口文件分别是 app.js 和index.js
    }

                 格式c:

    module.exports = {
        entry:{
            app : "app.js",
            index : "index.js"
        }
    }
    //表示一个多入口的项目 入口文件分别是app.js 和 index.js  
    //这种方式的好处是 可以自定义一个 入口文件的  键名

    一般推荐使用  格式 C;

    2.  output   表示打包文件的输出

    格式如下

    module.exports = {
        entry:"app.js",
        output:{
            filename:"bundle.js"
        }
    }
    //表示打包app.js 后,将其输出为文件 bundle.js
    
    当入口是多个文件的时候,可以使用占位符来定义输出的文件
    
    module.exports = {
        entry:{
            app:"app.js",
            index:"index.js"
        },
        output:{
            filename:"[name].bundle.[hash:5].js"
        }
    }
    
    //这里的 [name] 和 [hash:5] 就是占位符,可以根据 entry 中的文件名来 自动替换 [name]的值

    3. loader  webpack 默认是可以打包js代码的 ,当有css 等其它的文件也需要打包进去的时候,就要使用loaders了

    添加loader的格式如下:

    module.exports = {
        entry:{
            app:"app.js"
        },
        output:{
            filename:"bundle.js"
        },
        
        module:{
            rules:[
                {
                    test:'/\.css$/',        //表示匹配后缀名是 .css的文件
                    use : 'css-loader'      //使用 css-loader 来进行编译
                }
            ]
        }
    
    }

    常用的loader 有 : babeld-loader  (可以将 ES6的语法转换为 ES5的语法)

                                   style-loader css-loader (css相关的)

                                   file-loader url-loader (与文件和路径相关的)

    4. plugins  (可以全程参与打包的插件)

    作用,可以设置变量,等等很多,用法很灵活,不多说

    如: html-webpack-plugin  插件的基本作用就是生成html文件

     

     

     

     

     

     

     

    展开全文
  • 2019独角兽企业重金招聘Python工程师标准>>> ...

    在Windows下使用webpack入门

    本文所用所有源代码地址:
    https://github.com/Xganying/webpack/tree/master/webpack_test

    1. webpack的打包示意图理解:

    这里写图片描述

    2. 前期准备

    • 安装node

    这里写图片描述

    • 新建一个文件夹:webpack_test

    这里写图片描述

    3. 安装并使用webpack

    (1)在命令行下进入文件夹:webpack_test中,并初始化:

    这里写图片描述

    (2) 在当前文件中安装webpack

    这里写图片描述

    这里写图片描述

    安装webpack成功后,会看到webpack_test下有两个文件:node_modules和package.json:

    这里写图片描述

    (3) 在webpack_test目录下,新建文件:hello.js

    function hello(){
        console.log("hello, this is Cynthia !");
    }
    • 1
    • 2
    • 3

    (4) 用webpack将hello.js文件打包成hello.buddle.js文件:

    这里写图片描述

    理解字段含义:

        Asset: 本次打包生产的文件
        Size: 这个文件的大小
        Chunks : 这次打包的模块
        Chunk Names: 这次打包的模块的名称
    
    • 1
    • 2
    • 3
    • 4
    • 5

    打包后就会得到文件:hello.bunddle.js ,查看该文件内容时,它前面的都是webpack自动生成的一些内置函数等,而自己写的代码则在最后。

    这里写图片描述

    (5) 注意:

    可能由于是第一次使用webpack,所以在命令行时,可能会出现以下情况:
    
    • 1
    • 2

    这里写图片描述

    解决办法:需要安装一个全局的webpack,例如

    这里写图片描述
    这里写图片描述

    这样就可以正常的使用webpack了。

    (6)接着,继续新建文件:world.js

    function world(){
        return{
    
        }
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    在hello.js文件中引用:

    require('./world.js');
    
    function hello(){
        console.log("hello, this is Cynthia !");
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    然后打包就会发现显示的是Hello.js模块的编号是0,而world.js的模块编号是1:

    这里写图片描述

    打包后的文件则显示为:

    这里写图片描述

    (7)继续新建文件:style.css

    body{
        margin: 0;
        padding: 0;
    }
    • 1
    • 2
    • 3
    • 4

    在hello.js中引用:

    require('./world.js');
    require('./style.css');
    
    function hello(){
        console.log("hello, this is Cynthia !");
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    打包时发现报错:

    这里写图片描述

    原因:Webpack不支持css文件,如果要处理css文件,得依赖loader。

    (8)安装loader:

    这里写图片描述

    但是打包还是出错:

    这里写图片描述

    因为虽然引用了css文件,但是并没有给它指定loader,所以仍然会报错,给css文件指定loader,再打包:

    这里写图片描述

    这里写图片描述

    这就就可以正常打包了,可以看到打包以后生成的部分代码:

    这里写图片描述

    (9)新建一个index.html文件,并引用hello.buddle.js,再执行一遍打包

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>webpack_test</title>
    </head>
    <body>
        <script type="text/javascript" src="./hello.buddle.js"></script>
    </body>
    </html> 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    这里写图片描述

    (10)修改: 在style.css文件中添加样式,使得背景变为红色

    body{
        margin: 0;
        padding: 0;
        background: red;
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    重新打包后,在浏览器运行index.html文件,结果发现并没有改变背景颜色,原因是在引用css文件时,还需要style-loader:

    这里写图片描述

    这样,浏览器运行index.html之后发现背景样式就改变了。

    结论:

    • css-loader: 使webpack可以处理.css文件
    • style-loade r: 把通过css-loader处理完的文件,通过一个style标签插入到.html文件当中。 当index.html引用打包后的hello.buddle.js文件,并执行的时候,css的内容就会插入到html文件中。

    但是并不是每次都要这样加载这些loader文件,因为这样做可能会很麻烦。所以就可以指定这些loader文件:

    这里写图片描述

    但是我们发现每一次打包文件的时候,都要输入这么长的命令,很繁琐,也不好,所以可以通过–watch这个参数,使得每次执行打包的时候自动更新文件:

    这里写图片描述

    除了–watch这个参数外,还有其他参数,例如常用的还有:

    • –process ,可以看到打包的过程
    • –display-module : 查看打包的模块
    • –display-reason ;查看打包模块的原因

    还有许多参数在此不再多说明了。

    转载于:https://my.oschina.net/u/588516/blog/1583791

    展开全文
  • https://blog.csdn.net/shixin_0125/article/details/107057761
    展开全文
  • node.js v10.14.1的安装包 ...webpack文件夹 https://download.csdn.net/download/qq_30505673/10820300 在webpack中对truffle框架进行整合,从而进行以太坊dapp开发。 ...

    node.js v10.14.1的安装包 https://download.csdn.net/download/qq_30505673/10820282

    webpack文件夹 https://download.csdn.net/download/qq_30505673/10820300

    在webpack中对truffle框架进行整合,从而进行以太坊dapp开发。

    在webpack下面运行的命令是 npm run dev

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

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

    万次阅读 2017-09-05 19:27:42
    本文介绍了在 windows环境 ./node_modules/.bin/webpack 命令运行不了的原因以及解决方法。
  • 使用webpack创建一个新项目

    千次阅读 2018-05-24 18:44:16
    使用NPM和webpack创建一个符合前端工程化的项目 环境windows 1.win+r 打开cmd命令行工具 2.进入目标文件夹(项目文件夹),我创建的是webpack-test 3.使用npm创建package.json文件. 命令 cnpm init (我使用的...
  • 安装webpack4.0与webpack-cli的详解

    万次阅读 2020-06-23 09:57:10
    安装webpack真的不难,甚至很简单,大家要有信心 一、首先最好去安装最新版的node.js,windows平台需要去官网下载最新的安装包去安装,命令是没有软用的。 二、本地安装 打开要操作的项目目录的终端,可以直接...
  • webpack(一)安装

    千次阅读 2016-08-04 10:27:44
    webpack?webpack是一个模块打包器,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。打包核心原理:分块传输,按需进行懒加载,在实际用到某些模块的时候再增量更新,才是...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大...为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可...
  • webpack可以在终端中使用,在基本的使用方法如下: # {extry file}出填写入口文件的路径,本文中就是上述main.js的路径, # {destination for bundled file}处填写打包文件的存放路径 # 填写路径的时候不用添加{...
  • webpack安装失败,解决方法

    万次阅读 2017-07-11 16:03:05
    node webpack npm
  • 尝试着学习webpack,但总是说webpack不是内部命令,我是这样做的(事先已经安好了node和npm): 1.先在命令行执行 npm config set prefix “d:\node\node_global”设置全局路径 2.再执行 npm install webpack -g 在...
  • 如何上传本地项目到github这些就不说了, 今天遇到一个问题是:本机的webpack项目在npm初始化的时候会生成一...自己摸索了下发现下面的的指令是可行的:cd进入你的webpack项目:输入以下指令用于windows下新建一个.gi
  • mac安装webpack

    千次阅读 2016-09-04 01:01:46
    近半年工作的时候开始使用webpack构建项目,公司和以前的电脑都说windows系统,最近买了的苹果机,本以为在自己电脑上安装会很简单,但是出了点意料之外的问题,所以分享一下,希望可以帮助遇到同样问题的同学。...
  • 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包...
  • WebPack系列教程(四):安装

    千次阅读 2016-03-09 11:10:10
    node.jsinstall node.js node.js包含一个包管理器:npmwebpackUse webpack in a projectVersionsDev ToolsContinue reading
  • windows 使用npm安装webpack 4.0

    千次阅读 2018-03-03 00:42:29
    1、安装NodeJS首先需要安装nodejs点击如下链接https://nodejs.org/en/download/点击打开链接选择Windows Installer点击下载,下载完成之后点击安装包进行安装,点击运行点击next点上√,然后点击Next选择安装目录...
  • 一、安装webpack 1、安装最新的node.js;最新的node.js包括了npm,并且是全局安装的; 2、建立开发目录; 3、DOS命令,进入第二步建立的目录,并运行 npm init命令,建立package文件; 4、打开package文件,...
  • 当执行webpack-dev-server命令的时候就报以下错误: D:\wabg&gt;npm run server &gt; @ server D:\wabg &gt; webpack-dev-server --open The CLI moved into a separate package: webpack-cli. ...
1 2 3 4 5 ... 20
收藏数 9,833
精华内容 3,933
关键字:

webpack windows下使用