webpack 引用npm之外的库_npm webpack npm commond - CSDN
精华内容
参与话题
  • webpack使用第三方的时候 可以使用 webpack.providePlugin插件 有三种方式 1. 直接在html文件中引入 cdn上的文件 (注意这种方式是引用网络上的 CDN 文件) <script src="...

    当webpack使用第三方库的时候

    可以使用 webpack.providePlugin插件

    有三种方式

    1. 直接在html文件中引入 cdn上的文件  (注意这种方式是引用网络上的 CDN 文件)

    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>.js

    在html文件中引入了之后,就可以在入口文件(app.js)中,使用 $(function(){})  了

     

    2. 使用 npm 安装上jquery,然后 使用 webpakc.providePlugin插件

         方法如下 

            npm install jquery --save;  (这里的jquery是要在项目中运行的,所以要用 --save   而不能用  --save-dev)

            安装了 jquery后,webpack.config.js配置如下

    path
    
    module.exports = {
        entry:{
            app:"./src/app.js",
        },
        output:{
            path:path.resolve(__dirname,"dist"),
            filename:"[name].bundle.[hash:5].js"
        },
        module:{
            rules:[
                {
                    test:...
                    use:[
                        {
                            loader:......
                            options:{
                                .......
                            }
                        }
                    ]
                }
            ]
        },
        plugins:[
            new webpack.ProvidePlugin({
                $:"jquery",    //这里的意思是就把 $ 注入模块中 , 而后面的jquery 就是 npm 命令行中的 jquery模块
            })
        ]
    
    }

     配置好后,就可以在 项目中使用 $(function(){})了

     

    3.当第三方库是自已开发的,不在 CDN上,也没有npm可以用来安装的时候,就没有办法用以上两种情况来加载了

    这时就要使用   webpack.config.js 的  resolve配置了,还以 jquery 为例,  我们把 jquery.min.js下载到本地,存放在

    src/lib/jquery.min.js

    首先:下载网上的 jquery.min.js源码

    然后 配置 webpack.config.js 

    let webpack  = require("webpack");
    let path = require("path");
    
    module.exports = {
        .......
    
        resolve:{
            alias:{
                jquery$:path.resolve(__dirname,"./src/lib/jquery.min.js")
            }
        }
        // resolve alias的作用是装 jquery的模块指向本地文件 ./src/lib/jquery.min.js
    
        plugins:[
            new webpack.ProvidePlugin({
                $:"jquery"     
            }),   //这里是数组中的数据,所以要使用 “,”
        ]
    }

    这样也可以在app.js中使用 $(function(){})

    展开全文
  • webpack使用(4)之引入第三方JS

    千次阅读 2018-09-09 19:41:00
    一、script引入第三方lodash 不建议使用 &amp;lt;script src=&quot;https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;

    一、script引入第三方库lodash

    不建议使用

    <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

    二、 npm 引入的方式

    测试使用webpack.providePlugin插件

    第一步:npm i --save lodash

    使用webpack.providePlugin插件需要配置webpack

    npm i webpack --save-dev
    

    第二步:进行配置

      const webapck = require("webpack");
    plugins:[
            new webapck.ProvidePlugin({
                _:' lodash '
            })
          ]

    配置后的webpack.conf.js

    const path = require("path");
    const webapck = require("webpack");
    module.exports={
        //相对路径
        // entry:"./js/index.js",
        entry:{
            index:"./js/index.js"
        },
        output:{
            filename:"[name][hash:8].js",
            //绝对路径
            path:path.resolve(__dirname,"dist")
        },
        plugins:[
            new webapck.ProvidePlugin({
                _:'lodash'
            })
        ]
    }

    第三步:在模块中使用(任何js文件中都可以使用)

        console.log(_.chunk(['a', 'b', 'c', 'd'], 2));

    三、本地文件

    第一步:将lodash文件引入到本地
    第二步:进行配置

        resolve:{
            alias:{
                lodash $:path.resolve(__dirname," lodash / lodash.js")
            }
        },
    plugins:[
            new webapck.ProvidePlugin({
                _:' lodash '
            })
          ]

    配置后的webpack.conf.js

    const path = require("path");
    const webapck = require("webpack");
    module.exports={
        //相对路径
        // entry:"./js/index.js",
        entry:{
            index:"./js/index.js"
        },
        output:{
            filename:"[name][hash:8].js",
            //绝对路径
            path:path.resolve(__dirname,"dist")
        },
        resolve:{
            alias:{
                lodash_:path.resolve(__dirname,"js/lodash/index.js")
            }
        },
        plugins:[
            new webapck.ProvidePlugin({
                _:'lodash'
            })
        ]
    }

    第三步:在模块中使用(任何js文件中都可以使用)

    展开全文
  • react+tsx+webpack

    千次阅读 2019-01-11 17:21:00
    1、创建tsx初始化工程: create-react-app app-demo-ts --scripts-version=react-scripts-ts 2、编写组件类Hello,渲染至页面 ...npm install -g webpack 5、安装ts与webpack整合依赖 npm install --save-dev...

    一、初始化工程

    1、创建tsx初始化工程
    create-react-app app-demo-ts --scripts-version=react-scripts-ts
    2、编写组件类Hello,渲染至页面
    3、npm build、npm start,运行正常

    二、webpack打包

    4、安装webpack,webpack-cli
    npm install -g webpack
    npm install -g webpack-cli
    5、安装ts与webpack整合依赖
    npm install --save-dev typescript awesome-typescript-loader source-map-loader
    6、webpack执行
    报错:TS2307: Cannot find module ‘./logo.svg’
    解决:
    1)安装 url-loader,file-loader,svg-sprite-loader【最后发现每个都可以】
    2)tsconfig.json文件中,增加

      "files": [ 
        "images.d.ts" 
      ]
    

    images.d.ts为项目初始化自带文件

    declare module '*.svg'
    declare module '*.png'
    declare module '*.jpg'
    declare module '*.jpeg'
    declare module '*.gif'
    declare module '*.bmp'
    declare module '*.tiff'
    

    3)webpack.config.js文件中,module增加配置

     module: {
            rules: [
                { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
                { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
                //增加svg文件模块加载器,上面提到的三种loader都可以实现svg文件的加载
                {test:/\.(jpg|png|svg)$/,loader:['file-loader']}
            ]
        }
    

    再次执行webpack命令

    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/concepts/mode/
    

    按照提示,webpack.config.js中增加mode属性

       mode: 'development',
    

    打包成功

    7、引用css文件
    1)npm install css-loader style-loader --save-dev
    2)加入加载器

    {test:/\.css$/,loader:['style-loader','css-loader']}
    

    这里必须注意的是,style-loader与css-loader顺序不能颠倒,否则会打包失败。style-loader 将css插入到页面的style标签,css-loader 是处理css文件中的url()等
    3)webpack --display-modules查看打包模块
    在这里插入图片描述
    打包成功后,页面始终渲染失败
    (4)npm run eject
    认为是自己配置的原因,于是把隐藏的配置文件给显示出来,执行该反编译操作,可是操作不可逆,想用默认的配置文件,问题不断,于是重新创建项目

    三、重新构建

    1、create-react-app react_ts --scripts-version=react-scripts-ts
    2、npm install --save-dev typescript awesome-typescript-loader source-map-loader
    3、npm install css-loader style-loader --save-dev
    4、npm install url-loader file-loader svg-sprite-loader
    webpack中添加加载器
    5、webpack
    报错信息

    'rootDir' is expected to contain all source files.
    

    修改tsconfig.json,修改rootDir为当前目录
    6、npm install -g webpack-dev-server
    7、webpack-dev-server

    The CLI moved into a separate package: webpack-cli
    Please install 'webpack-cli' in addition to webpack itself to use the CLI
    -> When using npm: npm i -D webpack-cli
    -> When using yarn: yarn add -D webpack-cli
    internal/modules/cjs/loader.js:582
    

    8、npm i -D webpack-cli
    9、webpack-dev-server --hot --inline
    页面仍然渲染不上,查看webpack-dev-server帮助命令,看到了content-base选项,检查了下webpack.config.js,原来是目录设置错了,原本设置的是public目录,可是public下面只有index.html,更改为build目录,刷新页面,页面成功渲染。

    备注
    在webpack之前,执行npm run build/start命令是可以的,页面也能成功显示;执行webpack之后,在根目录下生成dist目录,执行webpack-dev-server后页面无法成功渲染;回过头来执行npm run build报错,提示budle.js语法有问题。
    安装tslint插件,目录下生成tslint.json文件,根据提示逐渐增加配置项后,编译成功。

    但是这样岂不是每次编译都把打包后的bundle.js文件包含进去了?是不是可以将webpack打包文件给排除在编译文件之外。

    展开全文
  • 简单的webpack- 引入bootstrap

    万次阅读 2017-05-16 17:02:15
    如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。 本来以为在入口文件内加一行就行: import 'bootstrap/dist/css/bootstrap.css' 然后安装依赖...

    Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。
    本来以为在入口文件内加一行就行:

    import 'bootstrap/dist/css/bootstrap.css'
    

    然后安装依赖:

    npm i bootstrap url url-loader style-loader css-loader --save
        

    实际上却不是想象的那么简单。因为css文件内还引用了很多类型的字体文件和矢量图文件。要引入它,必须同时提供css之外的类型的对应的loader:

    
    //webpack.config.js: 
    module.exports = {
        entry: {
           '1.js'
        },
        output: {    
            filename: 'bundle.js'
        },
        module: {
          loaders: [
              
                { test: /\.css$/, loader: 'style-loader!css-loader' },
                { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
                { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
                { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
                { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
          ]
        }
    };
    
    

    我们在html文件内使用那么一点点的bootstrap:

    // c.html
    <html>
      <body>
        <ul class="nav nav-pills">
          <li role="presentation" class="active"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">Profile</a></li>
          <li role="presentation"><a href="#">Messages</a></li>
        </ul>
        <script type="text/javascript" src="bundle.js"></script>
      </body>
    </html>
    

    再次执行转译:

    webpack

    打开浏览器:

    open c.html
    

    看到bootstrap那熟悉而太熟悉的界面。

    引入jquery

    如果需要使用bootstrap的js插件的话,就必须首先引入jquery。引用jquery的一个方法是使用webpack插件。

    首先安装jquery:

    npm i jquery

    其次使用插件装入jquery,方法是修改webpack的配置文件,加入:

        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })
        ]

    在入口文件内加入代码来做验证:

    $("body").append("<div>hello world</div>")
    

    如果成功,说明jquery加载成功。这样你就可以在入口js文件内加载bootstrap.js了:

    import 'bootstrap/dist/js/bootstrap.js'
    

    排除错误

    我确实在引入bootstrap的时候,遇到一个神奇的错误。在webpack转译时报错,css-loader,unknown word样子的错误。对webpack.config.js文件加入一个include属性并指向到不存在的目录即可。

    {
        test: /\.css$/,
        include: [
            path.resolve(__dirname, "not_exist_path")
        ],
        loader: "style!css"
    }

    原始的issue在此:https://github.com/webpack/cs... 。我看看看到此答案时以为是个玩笑。


    其他3篇相关文章也记录一下:

    https://segmentfault.com/a/1190000006630500

    https://segmentfault.com/a/1190000006633746

    https://segmentfault.com/a/1190000006634136

    展开全文
  • npm全局安装和局部文件安装区别

    千次阅读 2019-04-03 15:41:24
    上图是从网上找的webpack 安装的步骤,我们看到除了要全局安装之外,还需要本地安装,那么这两者有什么区别呢? 本文以Windows平台上做测试,以...全局安装方式是键入命令:npm install webpack -g 或 npm inst...
  • 如果是一个刚接触 React 的新手,当学完了 React 的各种基本概念和语法之后,准备开始实际的开发工作时,他又会碰到各种新颖的名词:npm, webpack, babel, flux, es2015…… 如果以前接触过这些工具还好,否则为了...
  • webpack使用总结

    千次阅读 2017-02-15 10:39:15
    学习webpack的时候,看过它的官网,发现非常难懂,各种内容编排的很乱,并且挺生涩难懂的,和React Native等项目的官网比起来,差太多了,所以如果刚开始接触webpack的话,不建议直接去其官网看。 一、webpack...
  • webpack4实用配置指南-上手篇

    万次阅读 2018-08-23 17:13:48
    算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感,比较捉急。工具用法的东西,好记性不如烂笔头,有必要系统梳理下webpack的配置常用配置以及构建优化。 分为上手篇和优化篇,本篇...
  • (一)什么是Webpack  Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github.io/,一进入官网可以看到下面这张大图: 这张图基本上解释了webpack是用来干嘛的,将一些...
  • webpack使用--loader和插件

    千次阅读 2017-03-24 00:14:10
    css-loader 处理css中路径引用等问题 style-loader 动态把样式写入html sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理
  • webpack学习笔记

    千次阅读 2015-08-02 17:07:51
    观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,css中可以嵌入图片dataUrl,对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,...
  • webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的追求。 废话不多,下面就就看下如何从0搭起我们的构建工具。  ...
  • WebpackWebpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析、压缩、合并、打包,最后生成...智能的静态分析:webpack的智能解析器几乎可以处理任何第三方
  • 打包会输出一个类dll包(dll包源于windows的动态链接),这些代码本身不会执行,主要是提供给我们的业务代码引用。(比如dll中有一个工具方法为时间格式化,这个方法本身并不会执行,但是当我们的业务中需要执行...
  • 文 基于webpack搭建前端工程解决方案探索 webpack  ...本篇主要介绍webpack的基本原理以及基于webpack搭建纯静态页面型前端项目工程化解决方案的思路。 下篇(还没写完)探讨下对于Nod
  • webpack之css模块化

    千次阅读 2018-05-06 15:33:40
    前言本文演示了如何开始css模块化;如何选择性的开启部分css文件的模块化功能;...涉及到的loader: css-loader、style-loader开启css-loader...需要在我们的webpack.config.js中对css-loader进行一些额外设置。编辑ma...
  • webpack打包分析与性能优化

    千次阅读 2018-01-02 09:46:57
    在去年年末参与的一个项目中,项目技术栈使用react+es6+ant-design+webpack+babel,生产环境全量构建将近三分钟,项目业务模块多达数百个,项目依赖数千个,并且该项目协同前后端开发人员较多,提高webpack 构建效率...
  • webpack踩坑之路——图片的路径与打包 转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进...
  • 基于webpack和vue.js搭建的H5端框架

    千次阅读 2016-10-15 22:28:53
    人类的发展得益于对追求不断的提升,在能活着的基础上是否要活得潇洒一点,技术的发展亦如是。在公司作为一个最最最最最最最底层的搬砖码农,经历了两个版本的铸(zhe)炼(mo)之后,我痛下决心今后一定要:………….....
  • 如何十倍提高你的webpack构建效率

    万次阅读 2016-07-10 17:25:44
    前言webpack 是个好东西,和 NPM 搭配起来使用管理模块实在非常方便。而 Babel 更是神一般的存在,让我们在这个浏览器尚未全面普及 ES6 语法的时代可以先一步体验到新的语法带来的便利和效率上的提升。在 React 项目...
1 2 3 4 5 ... 20
收藏数 2,115
精华内容 846
关键字:

webpack 引用npm之外的库