精华内容
下载资源
问答
  • 最近在用Vue写了一个项目用来webpack打包后,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅 完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过...

    最近在用Vue写了一个项目用来webpack打包后,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅

    完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过github pages预览项目。

    一、修改配置
    解决文件路径问题:
    打开项目根目录config文件夹下的index.js文件,进行如下修改:
    1.png
    看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将‘/‘改为‘./’

    背景图片路径错误
    在css中写的background-img的路径出错需要找到build文件夹下的utils.js,修改一下位置
    打开根目录build文件夹中的utils.js文件,在下图中标出的位置中添加publicPath: ‘…/…/’, 
    2.png

    项目打包后dist文件夹下的index.html引入文件没有引号,这里的解决方法是:

    找到build文件夹下的webpack.prod.conf.js文件,在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify,把minify中的 removeAttributeQuotes: true改为 removeAttributeQuotes:false
    3.png

    二、上传项目到Github
    执行npm run build命令,打包项目

    如果只是想通过github pages预览项目,不想上传整个项目代码,可以只将dist文件夹下的文件上传到github上,然后开启github pages功能预览。在dist文件夹下执行以下步骤

    1.在github里面新建一个仓库
    2.将dist文件夹中的文件上传到这个仓库中

    git init
    git add .
    git commit -m '描述信息'
    关联到远程仓库:git remote add origin ...
    git push -u origin master
    

    如果想管理项目的同时又可以预览,可以将整个项目都上传到github,然后将dist文件夹中的文件上传到仓库分支中,步骤如下:

    1.在github里面新建一个仓库,
    2.将整个项目上传到github

    git init
    git add .
    git commit -m '描述信息'
    关联到远程仓库:git remote add origin ...
    git push -u origin master
    3.然后将远程仓库克隆到本地
    git clone ...
    

    4.接着在这个仓库中建一个分支
    生成分支gh-pages并切换到此分支
    进入到克隆得到的文件夹中,执行如下命令
    git checkout --orphan gh-pages

    5.将克隆得到的文件里面除了.git文件以外的文件全部删掉,再将项目根目录下打包后生成的dist文件夹里面的内容复制到克隆文件中。
    依次执行以下命令:

    git add .
    git commit -m “描述信息”
    git remote add origin ....(这一步根据自己创建的仓库名来写)
    git push -u origin gh-pages (push文件到仓库中,注意后面是分支的名字,不是master
    
    展开全文
  • 自创建本课程以来,Webpack 5已正式发布,视频中的某些软件包已过时。 请参考此仓库的package.json文件以获取最新的软件包。 Webpack 5基础 这个是我免费的项目。
  • github: git@github.com:spcBackToLife/node-webpack4-ts-demo.git what is this. this is a simple project for you to undenstand how to build a simpe-node-demo, includes: webpack4 + typescripts node envir...

    github: git@github.com:spcBackToLife/node-webpack4-ts-demo.git

    what is this.

    this is a simple project for you to undenstand how to build a simpe-node-demo, includes:

    • webpack4 + typescripts
    • node environment
    • nodemon for hot relaod node files

    you can try this with the doc below. and the project demo is this
    repository.

    init the project

    mkdir node-webpack4-ts-demo
    cd node-webpack4-ts-demo && npm init
    

    then you will get a package.json file.
    next, you can create src/main.ts.

    add typescript

    add dependences

    # typescript need
    yarn add typescript -D  
    yarn add @types/node -D # to recognize the `require`
    

    add ts config: create a tsconfig.json in root path

    {
        "compilerOptions": {
           "strictNullChecks": true,
           "module": "commonjs",
           "esModuleInterop": true,
           "importHelpers": true,
           "allowSyntheticDefaultImports": true,
           "target": "es5",
           "lib": [
            "es2015"
           ]
        },
        "include": [
            "src" // write ts in src, you can define your own dir
        ]
    }
    
    

    use webpack to build typescript

    add dependences

    yarn add webpack webpack-cli - D
    yarn add babel-loader awesome-typescript-loader source-map-loader -D
    

    create webpack.config.js(this demo has simply distribute the dev confg,just as a demo)

    const path = require('path');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    module.exports = {
        mode: 'development',
        // change to .tsx if necessary
        entry: './src/main.ts',
        target: 'node',
        output: {
          filename: './dist/main.js',
          path: path.join(__dirname, '')
        },
        resolve: {
          // changed from extensions: [".js", ".jsx"]
          extensions: [".ts", ".tsx", ".js", ".jsx"]
        },
        module: {
          rules: [
            { 
              test: /\.ts(x?)$/, use: [
                
                {
                  loader: 'babel-loader'
                },
                {
                  loader: 'awesome-typescript-loader' # handle ts
                }
              ]
            },
            // addition - add source-map support
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
          ]
        },
        node: {
            __dirname: false, // handle node dirname filename error after pack
            __filename: false
        },
        // addition - add source-map support
        devtool: "source-map"
      }
    

    use babel to handle some grammer problems such as import in node

    add dependences

    yarn add @babel/core @babel/plugin-syntax-dynamic-import -D
    yarn add @babel/plugin-transform-runtime @babel/preset-env -D
    

    create .babelrc file and write

    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry"
          }
        ]
      ],
      "plugins": [
        "@babel/plugin-syntax-dynamic-import", # handle import problems
        "@babel/plugin-transform-runtime"
      ]
    }
    

    add node run command

    add dependences

    yarn add nodemon -D
    yarn add ts-node -D # ts-node can directly run ts file
    

    run code
    first, we need to create a nodemon.json for nodemon.

    {
        "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
        "watch": ["src"],
        "exec": "yarn dev",
        "ext": "ts"
    }
    

    then, add scripts in package.json

    # `webpack` the js with entry main.ts and user `nodemon` run the packed js
    #  use `nodemon` instead of `node` for hot reloading.
    {
        ...
        "start:dev": "nodemon",
        "dev": "ts-node ./src/main.ts"
        ...
    }
    

    last, run yarn start:dev, and it will run nodemon with nodemon.json, it will watch the src file changes,
    after that it will run yarn dev to run the main.ts, then you can try to change the file main.ts, it will relaod it self.

    if you want to pack the file and run the packed file, just add two cmds like this:

    {
        ...
        "build-dev": "webpack --config ./config/webpack/webpack.config.dev.js",
        "start-dev": "yarn build-dev && node ./dist/main.js",
        ...
    }
    

    then you can yarn start-dev

    github: git@github.com:spcBackToLife/node-webpack4-ts-demo.git

    展开全文
  • example-webpack-plugin-github-action Webpack插件设置示例 示例应用 基本的Webpack设置: Javascript :使用@babel/preset-env和@babel/preset-react CSS : postcss ( autoprefixer , cssnano ), css-...
  • github上传webpack项目 前提:有github账号,https://github.com/,安装了git工具,https://git-for-windows.github.io/ 在本地创建一个文件夹upload(名字随意)! 右击打开Git bash命令行窗口 输入cd Y:\upload(你...

    github上传webpack项目

    前提:有github账号,https://github.com/,安装了git工具,https://git-for-windows.github.io/

    • 在本地创建一个文件夹upload(名字随意)!
    • 右击打开Git bash命令行窗口
    • 输入cd Y:\upload(你自己的路径),进入到upload目录下
      在这里插入图片描述
    • 通过git init命令,将这个文件夹变为git可管理仓库
      在这里插入图片描述
    • 把你的webpack项目工程复制到upload目录下,完成后如下图:
      在这里插入图片描述
    • 输入命令:git add .

    在这里插入图片描述

    • git status 可以查看当前状态
      在这里插入图片描述
    • git commit -m 'name'提交,引号里面的name随意起!!
      在这里插入图片描述
    • 创建SSH KEY
    ssh-keygen -t rsa -C "你的邮箱地址"
    
    • 然后回车,y,回车,回车,结果如下:

    在这里插入图片描述

    • 然后就可以查看C:\Users\Administrator\.ssh目录下的id_rsa.pub,下面的一大串直接Crit
      A全选复制!

    在这里插入图片描述

    • 登录github,点击settings
      在这里插入图片描述
    • 然后点击ssh and gpg keys

    在这里插入图片描述

    • 然后。。。。。
      在这里插入图片描述
    • 下图的title随意,key就是你复制的,直接粘贴就行,然后add ssh key

    在这里插入图片描述

    • 添加成功

    在这里插入图片描述

    • github上创建一个新的项目New repository

    在这里插入图片描述

    • 输入Repository name随意,然后点击Create respository

    在这里插入图片描述

    • 点击红色标记或则全选复制

    在这里插入图片描述

    • 然后git窗口上输入git remote add origin https://github.com/11111111.git
      后面是刚才复制的路径

    注意:如果出现以下情况,请输入git remote add origin,然后在重新输入git remote add origin https://github.com/11111111.git,即先删除,再重新输入的意思
    在这里插入图片描述

    • git push -u origin master上传,当下次再次导入的时候输入git push origin master

    解释:因为当新建远程的仓库为空的时候需要参数u

    在这里插入图片描述
    OK了!!上传成功了!!

    显示上传的静态网页

    在这里插入图片描述
    此时上传的项目,并没有dist目录!!
    解决方案:
    将工程的.gitignore中的/dist/这行代码删除掉,然后然后重新npm run build
    在这里插入图片描述

    • 然后将upload目录下的项目全部删除,重新导入!!o(╥﹏╥)o
    • o(╥﹏╥)o
    • 然后git add .
    • git commit -m "name"
    • git push origin master
    • 成功!!(〃‘▽’〃)

    在这里插入图片描述

    • 然后点击如下:
      在这里插入图片描述

    • 页面下拉,会出现,github pages,选择master brabch,选择后,页面还会自动刷新,然后出现网址!

    在这里插入图片描述

    • 因为我的webpack工程,index.html文件在dist目录下,所以我的网址就是红色框框的再加上dist,比如说我的是:
    https://lizhenheng1111.github.io/Post/dist/
    

    然后页面就可以显示了!!

    展开全文
  • preload-webpack-plugin 弃用:该项目的分支可以代替使用。 一个Webpack插件,用于使用<link rel='preload'>自动连接异步(和其他类型)JavaScript块。 这有助于延迟加载。 注意:这是的扩展插件,该插件可...
  • webpack

    2018-03-11 16:30:23
    webpack的使用。一。安装npm install --save-dev webpack (本地安装) npm install --global webpack (全局)二。创建项目。mkdir webpack-demo &amp;&amp; cd webpack-demo npm init -y npm install --...

    webpack的使用。

    一。安装

    npm install --save-dev webpack (本地安装)
    npm install --global webpack (全局)
    二。创建项目。
    mkdir webpack-demo && cd webpack-demo 
    npm init -y
    npm install --save-dev webpack (在当前项目中安装webpack)
    npm install webpack-cli -D

    三。创建对应文件:webpack.config.js, index.js, index.html, dist文件夹(打包后的文件), src文件夹(需要打包的文件)。现在需要打包的是index.js,则把index.js放入src中。

    四。加载不同的文件。

    npm install --save-dev style-loader css-loader (加载css)
    npm install --save-dev file-loader (加载图片)
    npm install --save-dev csv-loader xml-loader (CSV、TSV 和 XML)
    js和json文件可以直接加载。

    五。webpack.config.js

    使用的插件:

    npm install --save-dev html-webpack-plugin (生成HTML文件)
    npm install clean-webpack-plugin --save-dev (清理指定的文件夹)
    module.export = {
      entry: './src/index.js',  => 单文件人口;
      //entry: {
      //     a: './src/a.js',
      //     b: './src/b.js'
      //     }
      plugins:{
               new  clearWebpackPlugin(['dist'])  // 清除指定文件夹
               new htmlWebpackPlugin({           // 生成HTML文件。
                   title: 'output message'
               })
      },
      output: {
              filename: '[name].bundle.js',
              path: resolve(_dirname,'dist')
       },
     module: {
         rules: [
           {
             test: /\.css$/,
             use: [
               'style-loader',
               'css-loader'
             ]
           },
           {
             test: /\.(png|svg|jpg|gif)$/,
             use: [
               'file-loader'
             ]
           },
           {
             test: /\.(woff|woff2|eot|ttf|otf)$/,
             use: [
               'file-loader'
             ]
           },
           {
             test: /\.(csv|tsv)$/,
             use: [
               'csv-loader'
             ]
           },
           {
             test: /\.xml$/,
             use: [
               'xml-loader'
             ]
           }
         ]
       }
    }
    webpack的深入理解请参考官方文档: 官方文档地址


    展开全文
  • webpack的理解 webpack它是代码编译工具,有入口,出口、loader和插件。其天生就代码分割、模块化,webpack2.0中加入tree shaking,用来提取公共代码,去掉死亡代码。 构建、打包、编译他们都是为了提高开发效率,...
  • GitHub主页源码 Webpack3 打包多模块、单页面。 avalone2 目前兼容最广的MVVM框架。 service-worker 离线缓存,可以实现没有网络的情况下进行访问。 PWA 配置了mainfest.json文件,移动端Chrome中发送桌面,可以实现...
  • Webpack 统计数据差异 使用两个 Webpack 统计文件之间的差异在您的 Pull-Request 中创建注释。 用法 要使用此 Github 操作,在您的步骤中,您可能需要: uses : chronotruck/webpack-stats-diff-action@1.0.0 with...
  • 运行webpack-dev-server,准备通过热重载进行编码 yarn start 分享 与具有Internet连接的任何人共享您的localhost运行的应用程序 yarn ngrok 建立 捆绑您的应用。 它将创建index.html , main.[hash].js , vendor....
  • 一个依赖 GitHub Pages,无需本地生成的静态博客,使用了 Vue.js 2 组件开发,Webpack 2 打包。
  • Webpack和ES6模块入门–演示 该演示项目是文章“ ”的 ! 用 :sparkling_heart: 通过 执照 该项目及其源代码已获得许可。
  •  优秀的前端工程师,总会探索未知的东西,通过学习和实践感受从无到有的体验,今天分享的是一个前后端分离的前端项目,该项目托管于GitHub可进行多人协作开发,通过VueJs框架构建,并由Webpack包管理工具进行模块...
  • 手动 webpack2.x 升级到 webpack 4.8.3(当前github最新版本) 一直使用的 webpack 是 2.3.3 版本作为生产环境使用,看了 react-create-app 的 webpack 是 3.8 版本,想着都是折腾,就直接自己手动升级到 4.8.3 吧,...
  • 将vue项目通过webpack打包在github上进行预览遇到的大坑!!! 捣鼓了半天,网上看了无数解答都无效,始终是404!!! 结果原因是: 在github上预览项目必须要有README.md文件,不然会是404!!! ...
  • 如何使用 webpack 10.一键部署到 github 做了网页目的就是给别人看 步骤 1.本地打包 2.上传到github 10.1 一个文件上传 git add . – git commit -v – yarn build(重新生成dist目录) 理论上来说dist目录中的...
  • webpack-1.3.1.zip

    2020-01-21 08:44:46
    vue 离线webpack包,主要针对无法连接github的开发人员,离线搭建前端项目,进行前端开发。
  • Bootstrap 5 + Webpack样板 使用Bootstrap 5启用Webpack的Web项目的基本模板。 基于: : 许可证:麻省理工学院。 包括 Bootstrap 5 , Webpack v4 ...部署到GitHub上的gh-pages分支。 $ npm run deploy
  • webpack.zip

    2020-06-29 23:41:07
    1、从https://github.com/vuejs-templates/webpack/releases 下载一个webpack的版本,压缩包中的内容解压到 目录 ~/.vue-templates/webpack/目录下; 2、使用如下命令进行离线方式的初始化,就能规避由于网络原因...
  • tdtool.github.io 基于webpack4的模块化构建工具
  • 下面就通过一个简单的webpack打包的react页面的部署,来介绍一个如何部署静态页面到github。 首先来到github中该demo的源码仓库,通过新建分支,新建一个gh-pages的分支 新建完分支,来到页面上部的setting
  • github上下载了一个vue项目,运行提示webpack: Failed to compile. 按照步骤,先执行了npm install ,结果,执行失败,报错一堆404 解决方法: npm install -g cnpm --registry=https://registry.npm.taobao.org ...
  • 使用工具:sublimeText+node+git 1,一个包的文件结构,生成初始文件 在node 命令行窗口中创建demo_a文件夹 ...使用命令 npm init 初始化包,生成package.json,定义...2,安装关于webpack的包,安装环境为局...
  • Webpack 同构渲染 使用OAuth API提供用户登录信息 使用外部JSON API 将您的应用程序放到互联网上 粗略的轮廓 9:00开始 简短介绍 项目设置 讨论节点,npm,hjs-webpack 用React渲染基本的“ hello”内容 React.js...
  • git clone https://github.com/evenstensberg/webpack-ui.git 2.打开本地计算机上的存储库,打开终端并导航到存储库,然后运行以下命令以下载所有必需的库/软件包并启动Webpack UI: npm install npm run ui
  • Github地球仪 灵感 这个项目的灵感来自,在上他们在全球地图上显示了实时的Github活动。 执行 地球构造有,通过由ThreeJS数据可视化项目 。... " build " : " webpack --config=webpack.prod.js " ,
  • 1、问题描述: 今天用 webpack (v1.14.0)配置本地服务,为了能在移动端预览开发效果,需要通过 IP 地址生存二维码然后手机扫描访问。...参考地址:https://github.com/webpack/webpack-dev-server/issues/147
  • git clone git@github.com:darrell0904/webpack-doc.git # 安装依赖 npm install # 启动项目 npm run dev   写文档的原因 因为现在对于 webpack 的配置了解的不够全面,比较碎片话,同时有些很新的概念一直都没有...
  • ## react-github-notetaker react.js应用程序可从github提取api数据,并通过react-router呈现的每个配置文件/用户名视图呈现类似于注释的笔记功能 依赖项: 火力地堡-注意数据库 reactfire-用于Firebase数据库集成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,937
精华内容 16,774
关键字:

githubwebpack