精华内容
参与话题
问答
  • Webpack安装

    2019-02-18 12:34:07
    1、安装nodejs环境 查看版本: C:\Users\Mollen>npm -v 查看安装路径: C:\Users\Mollen>npm config ls 在安装路径下新建文件夹用于存放相关数据:npm_modules和npm_...
    1、安装nodejs环境
    • 查看版本:
    C:\Users\Mollen>npm -v
    
    • 查看安装路径:
     C:\Users\Mollen>npm  config ls
    
    • 在安装路径下新建文件夹用于存放相关数据:npm_modulesnpm_cache并安装
    C:\Users\Mollen>npm config set prefix "E:\Program Files\nodejs\npm_modules"
    
    C:\Users\Mollen>npm config set cache "E:\Program Files\nodejs\npm_cache
    
    • 安装淘宝镜像提高下载效率:
    C:\Users\Mollen>npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    • 查看镜像版本:
    C:\Users\Mollen>cnpm -v
    
    • 安装nrm命令:cnpm install -g nrm
    C:\Users\Mollen>cnpm install -g nrm
    
    • 查看镜像指定位置:nrm ls
    C:\Users\Mollen>nrm ls
    
    • 切换镜像地址:
    C:\Users\Mollen>nrm use https://xxx.xxx.xxx/
    
    • 设置nodejs环境变量:D:\Program Files\nodejs (myurl)
    2、安装webpack
    • 本地安装:npm install --save-dev webpack或者cnpm install --save-dev webpack
    C:\Users\Mollen>npm install --save-dev webpack
    
    C:\Users\Mollen>cnpm install --save-dev webpack
    

    4.0+版本:npm install --save-dev webpack-cli

    C:\Users\Mollen>npm install --save-dev webpack-cli
    
    • 全局安装:npm install webpack -gcnpm install webpack -g
    C:\Users\Mollen>npm install webpack -g
    
    C:\Users\Mollen>cnpm install webpack -g
    
    • 安装指定版本:3.6.0
    C:\Users\Mollen>npm install webpack@3.6.0 -g
    
    • 查看webpack:webpack
    C:\Users\Mollen>webpack
    
    3、手动安装方式

    将压缩包解压到nodejs安装目录下覆盖原目录即可:
    百度云https://盘.百度.com/s/12KIq0CR9b3aBxQ9LhC1TIQ
    提取码:p2cc
    在这里插入图片描述
    出现如图所示说明webpack安装完成

    展开全文
  • Webpack安装教程

    千次阅读 2018-08-10 00:29:19
    本章为大家分享webpack4.0后的安装教程,自己刚接触时,网上大部分都是以前的安装教程,在过程真遇到些坑,为了大家不必浪费更多的时间,这里将为大家详细介绍 webpack是什么,它是一个根据模块依赖关系进行静态...

    本章为大家分享webpack4.0后的安装教程,自己刚接触时,网上大部分都是以前的安装教程,在过程真遇到些坑,为了大家不必浪费更多的时间,这里将为大家详细介绍

    webpack是什么,它是一个根据模块依赖关系进行静态分析的工具,简单来说就是打包工具,在当前的前端打包工具的使用时是趋势的发展;下面进入正题

    在安装webpack前,你必须为本机安装 node.js ;这个你直接去官网选择相应的系统直接下载一路下一步安装好,node下载

    例 window系统的

     

    下载安装好后

     

    打开命令行执行命令

    node -v     // 查看node的版本

    npm -v     //查看npm的版本

     

    都正常显示版本号,那就安转成功了可以进行webpack的安装了。一般这个不会出错,若出错检查下你安装的路径位置,实在不行重新安装吧,

    没问题就进入webpack的安装,webpack的安装有全局安装与 仅该项目安装,官方不建议全局安装,网上的教程基本是全局安装,即使你全局安装了,你依旧需要再次为项目安装。全局安装可能会造成项目中的指向的是全局安装的webpack;

    由于webpack4后的版本,命令迁移至webpack-cli,因此还需安装webpack-cli

    全局安装:

    打开命令行(win+R      输入cmd)

    在命令行执行    npm install webpack webpack-cli -g --save-dev

    -g -----全局安装

    --save-dev  ----- 信息写入package.json的devDependencies中


    然后等待时间,下载快慢取决于你的网速

     

    下载好后在命令行执行 webpack -v 查看webpack的版本号,正常显示说明安装好了

     

    为项目安装,找到你该项目的路径位置。在你项目的位置打开命令行;快捷方式 按住 shfit + 鼠标右键   在窗口选择在此处打开命令行,如果你安转了 git 的话 也可打开 Git-Bash here

    在命令行执行 同样的只是去除了 -g 这个全局安装

    npm install webpack webpack-cli --save-dev

    安装后你会发现你项目下多了node_moudle文件 package_lock.json文件;说明你成功安装好了

    再在命令行初始化项目执行命令

    npm init

    回车后你会发现

    不用管一路回车直到

    到这里你回到项目例看会看到 package.json文件   一切没问题

    这里webpakc的入口默认为 src 下的index.js,出口默认为 ./dist

    接下来你可以下项目下新建 文件夹 src 其下面并创建index.js;还有文件夹dist; 你也可通过在命令行执行命令

    mkdir src     创建文件夹src      mkdir dist 创建文件夹 dist,再在src下新建一个index.js文件

    到这里在你的index.js写你的js代码

    例:  

    index.js

    document.write("Hello webpack");

    然后在命令行执行 webpack   之后你会发现你的dist文件下多了一个 main.js 

     

    然后在你的 html 中 引入 main.js

    运行结果

    一切完好没问题,目前都是webpack的默认配置

    接下来可以自定义webpack的配置,在项目的根目录下创建 webpack.config.js 文件

    webpack.config.js

      const path = require('path');
    
      module.exports = {
       //入口文件
        entry: './src/index.js',
        //出口哦
        output: {
          //输出的文件名
          filename: 'bundle.js',
          //输出的路径
          path: path.resolve(__dirname, 'dist')
        },
        mode: 'development'
      };

    __dirname  ----- 运行时的当前路径

    mode ---- 模式prodution(生产模式)与 development (开发)webpack4后需指明

    package.json

    {
      "name": "webpacktest",
      "version": "1.0.0",
      "description": "",
      "private": true, 
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^1.0.0",
        "file-loader": "^1.1.11",
        "lodash": "^4.17.10",
        "style-loader": "^0.21.0",
        "webpack": "^4.16.3",
        "webpack-cli": "^3.1.0"
      }
    }

    加入了 "private": true  ----  设置私有

       "build": "webpack "  ---- 配置执行命令

    有该配置在命令行执行刷新配置

    npx webpack--config webpack.config.js

    后执行

    npm run build  

    打包  你会发现dist下面多了个 bundle.js文件  在html中引入bundle.js正常显示 Hello webpack

    完成了

    webpack自身只能理解js,并打包,如需进行 css 或者图片 xml 等还需下载相应的loder

    例:打包css 需安装  style-loader css-loader

     

    在html中引用的是 dist 下的 bundle.js ,这是前端开发的一个趋势:开发的源文件(例子中src/index.js)与 最终部署文件(例子的dist/bundle.js)是区分开的,因为开发环境与用户环境不一致。比如我们在开发中使用了ES6的新特性,在用户端不一定支持,这也是webpack等打包工具的意义, 它能够辅助我们构建出在目标用户浏览器上正常运行的代码

    webpack的起步讲到这,需了解详情也可去看官方文档webpack中文网

     

    希望对刚接触webpack的朋友有所帮助;有不对的地方问题可指出

    展开全文
  • 安装webpack step.1 全局安装webpack $ cnpm install --save-dev webpack -g $ cnpm install --save-dev webpack-cli -g 使用过程中遇到的坑 坑1. 全局、本地安装webpack后,不能用,也不查看webpack -v $ webpack ...

    安装webpack

    step.1 全局安装webpack

    $ cnpm install --save-dev webpack -g
    $ cnpm install --save-dev webpack-cli -g
    

    step.2 配置webpack.config.js文件

    //var path = require('path'); 
    module.exports = {
      entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
      output: {
        path: __dirname + "/dist",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      },
      mode: 'development' // 设置mode
    }
    

    使用打包命令

    1. 在配置了webpack.config.js文件后,可直接直接使用$ webpack
    2. 可使用package.json 文件中,指定的脚本命令 见坑2

    使用过程中遇到的坑

    坑1. 全局、本地安装webpack后,不能用,也不查看webpack -v

    $ webpack src/index.js dist/bundle.js
    One CLI for webpack must be installed. These are recommended choices, delivered          as separate packages:
     - webpack-cli (https://github.com/webpack/webpack-cli)
       The original webpack full-featured CLI.
    We will use "npm" to install the CLI via "npm install -D".
    Do you want to install 'webpack-cli' (yes/no): no
    You need to install 'webpack-cli' to use webpack via CLI.
    You can also install the CLI manually.
    

    原因
    webpack4,命令行相关的内容都移到 webpack-cli,所以还需要安装 webpack-cli,否则就出出上面的问题

    解决办法

    $ cnpm install webpack-cli -g
    

    检查一下是否正常安装webpack

    $ node -v
    v8.11.3
    $ webpack -v
    4.39.3
    $ webpack-cli -v
    3.3.7
    

    坑2 . 使用 webpack src/index.js dist/bundle.js 报错

    $ webpack src/index.js dist/bundle.js
    ...
    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this 
    value. Set 'mode' option to 'development' or 'production' to enable defaults 
    for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https         ://webpack.js.org/configuration/mode/
    

    原因
    打包时,指令中没有指定mode选项,或配置文件中没有指定mode选项

    解决办法.1
    使用下面指令

    $ webpack --mode production src/index.js dist/bundle.js
    

    解决办法.2
    使用webpackage.config.js配置入口及目录js,同时在package.json中的 script中,声明如下

    webpackage.config.js

    //webpackage.config.js
    //var path = require('path'); 
    module.exports = {
      entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
      output: {
        path: __dirname + "/dist",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      },
      mode: 'development' // 设置mode
    }
    

    package.json

    //package.json
      "scripts": {
        "test": "echo \"no test function\"",
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
      }
    

    定义好后,直接使用package.json中定义的脚本

    $ npm run build
    

    or

    $ webpack
    

    坑3 . 使用 webpack --mode production src/index.js dist/bundle.js 报错

    $ webpack ./src/index.js dist/bundle.js --mode production
    ...
    ERROR in multi ./src/index.js dist/bundle.js
    Module not found: Error: Can't resolve 'dist/bundle.js' in 'E:\bing_study\webpack__project'
     @ multi ./src/index.js dist/bundle.js main[1]
    

    原因
    webpack版本过高,原来的命令已经不适用了

    解决办法

    $ webpack ./src/index.js -o dist/bundle.js --mode production
    
    展开全文
  • webpack 安装及使用详解步骤

    千次阅读 2019-02-25 01:33:10
    webpack 安装及使用详解步骤 一、起步     1、安装    2、基本使用    3、创建bundle文件...

    webpack 安装及使用详解步骤

    一、起步

        1、安装    2、基本使用    3、创建bundle文件    4、使用配置文件

    二、开发

        1、webpack-dev-server自动打包编译    2、html-webpack-plugin自动添加js入口文件

    三、管理资源

        1、加载CSS、less、scss    2、加载图片    3、加载字体

    四、bable处理高级js语法

    五、Vue

        1、开发环境    2、完整版     3、运行时    4、vue-router    5、vue-resource    6、vuex

    网页中常见的静态资源:JS(.js  .jsx  .coffee  .ts)、CSS(.css  .less  .sass  .scss)、Images(.jpg  .png  .gif  .bmp  .svg)、字体文件Fonts(.svg  .ttf  .eot  .woff  .woff2)、模板文件(.ejs  .jade  .vue)。静态资源使网页加载速度慢,因为要发起很多二次请求;静态资源间存在综复杂的依赖关系。解决办法:合并压缩(sprite、图片的Base64编码等)、解决各个包之间复杂的依赖关系。

    webpack是基于Node.js开发的前端项目构建工具。本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有模块打包成一个或多个bundle。官网:https://webpack.github.io/  https://www.webpackjs.com/

    Gulp是基于task任务的,webpack是基于整个项目进行构建的。

    一、起步

    1、安装

    确保已安装Node.js最新的长期支持版本(LTS),因为使用旧版本可能遇到各种问题,可能缺少webpack功能以及/或者缺少相关package包。

    包安装出错时,可删除node_modules文件夹,运行npm install重新安装所有包。也可以npm uninstall <包名>卸载相应的包。

    (1)全局安装

    运行npm i webpack -g全局安装。

    (2)本地安装

    对于大多数项目,建议本地安装(先全局安装,才能使用webpack命令)。使引入破坏式变更(breaking change)的依赖时,更容易分别升级项目。在项目根目录中运行以下命令安装到项目依赖中。

    安装到最新版本:npm install --save-dev webpack
    安装到特定版本:npm install --save-dev webpack@<version>

    使用webpack 4+版本时,还需要安装CLI:npm install --save-dev webpack-cli,提供命令行(如webpack命令)和打包功能。

    2、基本使用

    webpack-demo         // 根目录
      |- package.json
      |- webpack.config.js // 配置文件
      |- /dist             // 发布的文件
        |- index.html        // 首页
        |- bundle.js
      |- /src              // 源代码
        |- /css
        |- /js
        |- /images
        |- main.js           // js入口文件
      |- /node_modules
    

    创建项目基本的目录结构;运行npm init -y在根目录下创建package.json(项目是中文名使用npm init),使用npm管理项目中的依赖包;运行npm install webpack webpack-cli --save-dev本地安装webpack。

    使用npm i jquery -S安装jquery类库。import $ from 'jquery'导入jquery类库。

    <!-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8'>
        <title>起步</title>
    </head>
    <body>
        <ul>
          <li>这是第1个li</li>
          <li>这是第2个li</li>
          <li>这是第3个li</li>
          <li>这是第4个li</li>
        </ul>
        <script src="./bundle.js"></script>
    </body>
    </html>
    
    /* main.js */
    import $ from 'jquery' // 相当于node中,const $=require('jquery')
     
    $(function(){
      // 设置背景色隔行变色
      $('li:odd').css('backgroundColor','pink');
      $('li:even').css('backgroundColor','#ddd');
    })
    

    import或require导入包的查找规则:项目根目录中node_modules文件夹->根据包名找对应的文件夹->package.json包配置文件->main属性,指定了该包在被加载时的入口文件。

    3、创建bundle文件

    “源”代码(/src)是用于书写和编辑的代码,“分发”代码(/dist)是构建过程产生的代码最小化和优化后的“输出”目录,最终将在浏览器中加载。

    webpack能够很好地支持import和export语句、及多种其它模块语法。webpack会将代码“转译”,以便旧版本浏览器可以执行。

    将src/main.js“转译”为dist/bundle.js:webpack .\src\main.js --output .\dist\bundle.js(入口文件路径 输出文件路径);或npx webpack,将脚本作为入口起点,然后输出为main.js。

    4、使用配置文件

    在webpack 4中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,webpack仍然要支持配置文件,这比在终端中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用CLI选项方式的配置文件。

    使用配置文件创建bundle:webpacknpx webpack --config webpack.config.js。在控制台直接输入webpack命令执行时,去项目根目录查找配置文件,解析得到导出的配置对象,拿到配置对象中指定的入口和出口,进行打包构建。webpack 4有约定,为了尽量减少配置文件的体积,默认约定了打包的入口是./src/index.js和打包的出口是./dist/main.js。

    /* webpack.config.js */
    const path=require('path')
     
    module.exports={ // node语法
      entry:'./src/main.js', // 项目入口文件,默认为'./src/index.js'
      output:{
        filename:'bundle.js', // 输出的路径
        path:path.resolve(__dirname,'dist') // 输出的文件名
      }
    }
    

    二、开发

    1、webpack-dev-server自动打包编译

    使用webpack-dev-server工具实现代码自动打包编译,修改和保存任意源文件,web服务器就会自动重新加载编译后的代码。

    (1)运行npm install --save-dev webpack-dev-server将该工具安装到项目的本地开发依赖。该工具依赖于webpack,在本地项目中必须安装webpack。

    (2)在命令行直接运行webpack-dev-server命令进行打包,报错,因为webpack-dev-server是本地安装的,无法把它当作脚本命令。需要借助于package.json文件中的指令运行webpack-dev-server命令。在scripts节点下新增"dev": "webpack-dev-server"指令,运行npm run dev。或者新增"start": "webpack-dev-server --open --port 3000 --concentBase dist --hot",运行npm start打开服务器。

    (3)命令参数

    方式一:修改package.json的script节点

    --open 自动在浏览器中打开该端口地址,后面可跟浏览器名称,如firefox
    --port 修改运行时的端口号
    --host 修改运行时的域名,如127.0.0.1
    --contentBase 设置托管的根目录,在浏览器中直接打开该路径下的.html文件
    --hot 启动浏览器热更新,不会重新生成bundle.js,只会生成一个.js和.json补丁保存局部更新的代码,并实现浏览器的无重载异步刷新(对css等有效果,对js无效果)

    方式二:修改webpack.config.js文件,新增devServer节点

    /* webpack.config.js */
    const path=require('path')
    const webpack=require('webpack') // 启用热更新使用
     
    module.exports={
      devServer:{
        open:true,
        port:3000,
        contentBase:'./dist',
        hot:true
      },
      plugins:[
        new webpack.HotModuleReplacementPlugin() // 放置热更新的模块对象
      ]
    }
    

    (4)webpack-dev-server打包生成的bundle.js文件,在项目根目录<script src="/bundle.js"></script>。并没有存放到实际的物理磁盘上,而是直接托管到电脑的内存中,在根目录找不到。由于需要实时打包编译,放在内存中速度会非常快。

    2、html-webpack-plugin自动添加js入口文件

    html-webpack-plugin,自动根据指定页面在内存中生成一个新页面之后,所有的打包好的bundle会自动添加到新页面的body底部。不再需要指定启动目录和手动处理bundle.js的引用路径。

    npm install --save-dev html-webpack-plugin

    /* webpack.config.js */
    const path=require('path')
    const htmlWebpackPlugin=require('html-webpack-plugin')
     
    module.exports={
      plugins:[ // 配置插件的节点
        new htmlWebpackPlugin({
          template:path.join(__dirname,'./dist/index.html'), // 指定模板页面
          filename:'index.html', // 指定生成页面名称,浏览器默认打开index.html
          title:'Output Management'
        })
      ]
    }
    

    三、管理资源

    webpack默认只能打包处理JS类型的文件,如需引入任何其它类型的文件,需通过loader 。

    webpack处理第三方文件类型的过程:发现要处理的文件不是JS文件,去配置文件中查找有没有对应的第三方loader规则;如果有,调用对应的loader处理这种文件类型,从后往前调用;处理完毕,把处理的结果交给webpack进行打包合并,输出到bundle.js。

    1、加载CSS、less、scss

    为了从JS模块中import一个CSS文件,需要在module配置中安装并添加style-loader和css-loader。

    /* main.js */
    import './css/index.css'
    import './css/index.less'
    import './css/index.scss'
    

    npm install --save-dev style-loader css-loader

    npm install --save-dev less less-loader less是less-loader内部依赖,不需要显式定义

    npm install --save-dev node-sass sass-loader node-sass是sass-loader内部依赖,不需要显式定义

    /* main.js */
    import './css/index.css'
    import './css/index.less'
    import './css/index.scss'
    

    2、加载图片

    file-loader和url-loader可以接收并加载任何文件。

    npm install --save-dev file-loader 使用file-loader,图片不会被编码为base64

    npm install --save-dev url-loader file-loader是url-loader内部依赖,不需要显式定义

    {test:/\.(png|svg|jpg|gif)$/,use:'file-loader'}, // 处理图片
    {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}
    

    limit给定的值是图片的大小(byte),如果图片大于等于给定的limit值,则不会被转为base64格式的字符串。

    图片名默认会被修改为哈希值,防止重名冲突。name=[name].[ext]使图片保持原名,在前面加哈希值解决重名冲突。

    3、加载字体

    npm install --save-dev file-loader url-loader

    {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'} // 处理字体文件
    

    四、bable处理高级js语法

    webpack默认只能处理部分ES6语法,一些更高级的ES6或ES7语法,需要借助第三方的loader处理,转为低级的语法后,把结果交给webpack打包到bundle.js中。

    webpack 4.x | babel-loader 8.x | babel 7.x
    npm install -D babel-loader @babel/core @babel/preset-env webpack

    npm install -D @babel/runtime @babel/plugin-transform-runtime @babel-runtime是依赖

    babel-preset-env是较新的ES语法。(使用了static关键字报错,可能是因为这只是提案,目前不支持)

    babel对一些公共方法使用了非常小的辅助代码,如_extend。默认情况下会被添加到每一个需要它的文件中,引入babel runtime作为一个独立模块,来避免重复引入。禁用babel自动对每个文件的runtime注入,而是引入babel-plugin-transform-runtime使所有辅助代码从这里引用。

    配置babel的loader规则时,必须把node_modules目录排除。否则,babel会把node_modules中所有的第三方JS文件都打包编译,打包速度非常慢且非常消耗CPU,且即使编译完毕项目也无法正常运行。

    /* webpack.config.js */
    module.exports={
      module:{
        rules:[
          {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} // 配置babel处理ES6等高级语法
        ]
      }
    }
    

    在项目的根目录中,新建一个.babelrc的babel配置文件,该文件是JSON格式,不能写注释,字符串必须用双引号。preset预设,可翻译为语法。

    {
      "presets":["@babel/preset-env"],
      "plugins":["@babel/plugin-transform-runtime"]
    }
    

    babel默认启用严格模式,如果要移除严格模式,npm install babel-plugin-transform-remove-strict-mode,并修改.babelrc。

    {
      "plugins":["transform-remove-strict-mode"]
    }
    

    五、Vue

    1、开发环境

    开发环境下,Vue会提供很多警告来对付常见的错误与陷阱。当使用webpack构建工具时,Vue源码会根据process.env.NODE_ENV决定是否启用开发环境模式。

    /* webpack.config.js */
    // webpack 4+
    module.exports={
      mode:'development'
    }
    // webpack 3及其更低版本
    var webpack=require('webpack')
     
    module.exports={
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV':JSON.stringify('production')
        })
      ]
    }
    

    2、完整版

    npm install --save-dev vue

    使用import Vue from 'vue'导入Vue构造函数时,"main": "dist/vue.runtime.common.js",只提供了runtime-only的方式。如果需要在客户端编译模板(如传入一个字符串给template选项,或挂载到一个元素上并以其DOM内部的HTML作为模板),就需要加上编译器,即完整版。否则会报错[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    方式1:

    /* main.js */
    import Vue from '../node_modules/vue/dist/vue.js'
    

    方式2:每次需要重新启动服务器

    /* main.js */
    import Vue from 'vue'
    
    /* webpack.config.js */
    module.exports={
      resolve:{
        alias:{
          "vue$":"vue/dist/vue.esm.js" // 设置Vue被导入包时的路径
        }
      }
    }
    

    3、运行时

    运行时版本相比完整版体积要小大约30%,所以应该尽可能使用这个版本。

    npm install --save-dev vue

    npm install --save-dev vue-loader vue-template-compiler vue-template-compiler是依赖

    /* main.js */
    import Vue from 'vue'
    import login from './login.vue' // 导入login组件
    new Vue({
      el:'#app',
      render:function(createElement){
        return createElement(login)
      }
      // 简写为render:c=>c(login)
    })
    
    /* webpack.config.js */
    const VueLoaderPlugin=require('vue-loader/lib/plugin')
    module.exports={
      module:{
        rules:[
          {test:/\.vue$/,use:'vue-loader'} // 配置.vue文件
        ]
      },
      plugins:[
        new VueLoaderPlugin()
      ]
    }
    
    

    4、vue-router

    npm install --save-dev vue

    npm install --save-dev vue-router

    如果在一个模块化工程中使用它,必须通过Vue.use()明确地安装路由功能。

    /* main.js */
    import Vue from 'vue'
    import VueRouter from 'vue-router'
     
    Vue.use(VueRouter)
     
    import app from './app.vue'
    import router from './router.js'
     
    new Vue({
      el:'#app',
      render:c=>c(app),
      router
    })
    

    将<router-link>和<router-view>放到render渲染的<template>中。

    /* app.vue */
    <template>
      <div>
        <p>render渲染的组件</p>
        <router-link to="/foo">To Foo</router-link>
        <router-link to="/bar">To Foo</router-link>
     
        <router-view></router-view>
      </div>
    </template>
    

    将定义、注册路由抽离为router.js

    ​/* router.js */
    import VueRouter from 'vue-router'
     
    import foo from './main/Foo.vue'
    import bar from './main/Bar.vue'
     
    var router=new VueRouter({
      routes:[
        {path:'/foo',component:foo},
        {path:'/bar',component:bar}
      ]
    })
     
    export default router // 向外暴露router对象
    

    5、vue-resource

    npm install --save-dev vue

    npm install --save-dev vue-resource

    /* main.js */
    import Vue from 'vue'
    import VueResource from 'vue-resource'
     
    Vue.use(VueResource)
    

    6、vuex

    npm install --save-dev vue

    npm install vuex --save

    npm install es6-promise --save Vuex依赖Promise,如果浏览器并没有实现Promise(如IE)

    /* main.js */
    import Vue from 'vue'
    // import 'es6-promise/auto'
    import Vuex from 'vuex'
     
    Vue.use(Vuex)
    
    展开全文
  • Webpack安装教程

    千次阅读 2019-03-08 16:15:12
    Webpack安装教程 简单了解 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 Webpack就是可以分析你的项目结构,找到JavaScript模块...
  • webpack安装

    2019-06-05 09:34:12
    安装webpackwebpack’ 不是内部或外部命令解决办法以及npm配置 一、下载安装node.js(npm) 官网有最新版的nodejs,但是最新版可能有各种情况出现,网上的教程针对旧版的教程,这里使用一个廖雪峰老师给出的nodejs...
  • webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中 初步使用webpack打包构建列表隔行变色案例 运行npm...
  • webpack安装和基本使用

    万次阅读 2018-07-17 21:10:50
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • node.js的安装 首先需要安装node.js 官网地址:https://nodejs.org/en/ 下载LTS稳定版本即可,一路傻瓜式安装 安装之后在cmd中执行node -v npm -v如果显示版本的话则安装成功 配置 找到安装node.js的地址,里面会...
  • 安装webpack--全局安装

    2020-04-08 18:44:56
    确认是否安装成功,输入 webpack -v 后出现: One CLI for webpack must be installed. These are recommended choices, delivered as separate packages: - webpack-cli (https://github.com/webpack/webpack-c...
  • 方式一:yarn命令安装: yarn global add webpack webpack-cli yarn add webpack webpack-cli --dev //简写 yarn add webpack webpack-cli -D –dev 指安装到devDependencies:开发时的依赖包 –save dependencies:...
  • webpack安装

    2017-03-16 15:57:16
    1,先必须安装node-v6.10.0-x64.msi;...3,安装webpack,这里说明一下,NPM的全称是Node Package Manager ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。但是由于NPM服务器在国外
  • 说说webpack 安装过程中的那些错误(坑)

    万次阅读 多人点赞 2018-03-02 23:00:19
    安装webpack可谓是心累啊,我花了好几天时间都没安装好,各种报错啊, 什么Please install 'webpack-cli' in addition to webpack itself to use the CLI. 什么-bash: webpack: command not found 还有No such ...
  • webpack安装

    2018-11-19 00:50:25
    文章目录webpack功能webpack环境搭建安装webpack webpack功能 模块打包 打包js,html,css文件 插件功能 webpack环境搭建 基于node.js,首先需要安装node.js 安装webpack npm i webpack -g npm i webpack-cli -g ...
  • mac下WebPack 安装

    千次阅读 2019-02-08 16:47:59
    webpack安装 首先必须要先安装nodejs nodejs可以直接去官网下载mac 推荐使用本地安装,不建议用全局安装。因为我们不同的项目可能使用不同的版本号 安装步骤演示如下: 第一、初始化package.json文件 进如一个空...
  • webpack安装教程

    2019-02-21 17:00:11
    百度教程:https://jingyan.baidu.com/article/a3a3f811230ee58da3eb8a6e.html 1、安装node.js; ... 安装完成后可以通过命令行工具:node -v查看是否安装成功。node.js自带npm,所以node....
  • webpack安装

    2017-02-09 17:48:00
    一:首先确定已经安装node.js 没有安装node.js可以去node.js官网下载并安装(http://nodejs.cn/)。非常简单,这里不再赘述。 二:安装webpack 1.windows+R 输入cmd打开控制台,进入D盘(命令 d:)输入命令:...
  • Webpack安装

    2017-09-19 16:44:04
    一.安装 1.安装node.js 怎么安装可以查看:NodeJS、NPM安装配置步骤(windows版本) 注意:node.js必须是最新版本。...使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能或缺少相关 package 包。
  • 关于Webpack安装与删除

    2019-06-21 16:05:43
    安装Webpack 一、创建一个新的本地项目目录名为webpack-demo d: 回车 — 进入D盘 cd Webpack_demo — 在D盘下新建文件,或进入目录 二、创建package.json文件: npm init -y 三、安装webpack: 1》局部安装:npm ...
  • webpack安装配置

    2018-05-11 03:08:58
    新建项目文件,gitBash 可用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 初始化: cnpm init ...全局安装webpack: cnpm install webpack -g 针对webpac...

空空如也

1 2 3 4 5 ... 20
收藏数 69,497
精华内容 27,798
关键字:

webpack安装