webpack xml打包设置路径_webpack 打包路径设置 - CSDN
精华内容
参与话题
  • 配置 webpack打包路径

    万次阅读 2018-11-17 15:12:32
    按照图示 设置 需要打包的文件 ,配置打包后输出到哪个文件及路径  配置完成以后,直接在终端 输入 webpack 就会实现自动打包,小伙伴赶紧动手试一下 如果说 我们想要 我们一修改文件,不用我们手动打包,就想让...

     

    在 src 目录下面 新建一个 webpack.config.js 文件 

    按照图示 设置 需要打包的文件 ,配置打包后输出到哪个文件及路径 

    配置完成以后,直接在终端 输入 webpack 就会实现自动打包,小伙伴赶紧动手试一下

    如果说 我们想要 我们一修改文件,不用我们手动打包,就想让我们 修改的文件生效

    1、可以在 package.json 文件中配置 dev: webpack-dev-server

    2、然后在终端里面 执行 npm run dev

    会打开一个端口,我们可以直接访问这个端口(默认是8080端口),访问我们的文件

    3、修改以后只要我们修改就会自动进行编译

    注意:使用 wabpack-dev-server 以后需要在我们的html  文件中修改,引入的打包文件路径

       3.1 这是我为使用 webapck-dev-server 的时候 引入 bundle.js 路径

      3.2 这是使用 webapck-dev-server 的时候 引入 bundle.js 路径

    因为使用 webpack-dev-server 帮助我们生成的 bundle.js 并没有存放到实际的 物理磁盘中,而是直接 托管到了 电脑的内存中,所以在项目目录中 // 根本找不到 bundle.js 这个文件,虽然看不到,但是我们可以认为 打包好的文件 是和 dist src node_modules 平级,有一个看不见的 文件bundle.js,这样做的原因就是 (页面渲染块)

    4、如果我们还想 在配置完 webapck-dev-server 的时候,执行npm run dev 自动打开 端口连接

    可以做如下配置

    还可以 给 dev 配置 --hot 这样的话 我们进行文件修改,就会在上次打包好的文件上 打上我们本次修改的补丁,就不用每次都生成一个完整的 打包文件,从而运行会更快

    ps: 还可以通过运行命令 npm install html-webpack-plugin -D 把 html文件也放到 内存中去

    安装好  html-webpack-plugin 这个插件以后,需要在webpack配置文件中 作如下修改:

    二、webpack 打包处理 css类型文件 的步骤方法

    1、在 main.js 中 用import 导入 css 文件路径 我这边的路径是 import  "./src/css/index.css"

    2、导入以后,因为 webpack 不能处理非 JS 类型的文件,所以 需要用 npm i style-loader css-loader -D

    3、去webpack 配置文件中,新增一个module 属性

    并且调用处理的规则是 从右往左 处理,也就是说 先调用 css-loader 去处理匹配到的 css文件

    4、对应的 处理 less 文件,安装 less-loader,不过安装前得先 使用命令  npm i less -D 安装 less,如果不安装less 直接安装会有警告: 

    然后定义匹配规则

    因为 less 也是样式,所以先用 less-loader 处理完以后,必须在调用  'style-loader','css-loader'

    5、对应处理sass 文件,也需要先 使用 npm i node-sass -D 安装 node-sass,然后再安装 npm i sass-loader -D

    对应的咋去匹配 sass 的 rules:

    6、处理 css 文件中的 url 地址:

         webpack 默认是无法处理 css 中的url 地址的

    此时我们需要安装 处理url的 loader ,使用命令 npm i url-loader file-loader -D,安装成功以后,去配置文件配置rules

    更进一步可以 配置 打包图片后的相关参数:

    limit: 设置一个是否将图片打包成 base64 位的临界值

    name: 可以设置 原来的图片经过打包以后,还是保持和原来的名字一样,为了防止重名还可以在图片名字前面加上 哈希值

    7、配置处理 字体文件的 lodaer 

    展开全文
  • Webpack打包生成相对路径的资源引用

    千次阅读 2018-12-26 15:07:35
    背景 一般企业使用tomcat、weblogic等作为中间件容器,部署应用,每个应用都会有相应的上下文;...然而,使用vue-cli生成的模板工程,默认的webpack配置,打包的css、js等资源,路径都是绝对的, ...

    背景

    一般企业使用tomcat、weblogic等作为中间件容器,部署应用,每个应用都会有相应的上下文;比如部署应用App1,App2,那么App1对应的url就应该是

    http://ip:端口/App1

    部署App2,也是同理,访问路径为:

    http://ip:端口/App2

    然而,使用vue-cli生成的模板工程,默认的webpack配置,打包的css、js等资源,路径都是绝对的,

    这样会导致 应用在开启调试期间,一切的引用都是正常的;但是当打包之后,因为生成了绝对路径的资源,当部署到带上下文的中间件的时候,就会导致资源引用失败(404):

    解决方法

    打开webpack.prod.conf.js

    找到output:增加 publicPath: './',  即可,如图。

    这样,不管是调试,还是打包应用,资源的引用路径都是正确的。

     

    其他的使用webpack当构建工具的,应该也是可以这样配置的。

    展开全文
  • Webpack(三)前端项目打包步骤

    千次阅读 2017-09-30 15:10:53
    操作步骤1、进入journal-web目录cd journal-web2、安装依赖包(package.json)cnpm install3、打包,默认执行webpack.config.js,然后稍等片刻,等待dist文件夹生成webpack4、页面展示 dist->xmlsample目录下找到...

    操作步骤


    1、进入journal-web目录

    cd journal-web

    2、安装依赖包(package.json)

    cnpm install

    3、打包,默认执行webpack.config.js,然后稍等片刻,等待dist文件夹生成

    webpack

    4、页面展示

    dist->xmlsample目录下找到xml文件,浏览器打开

    如果打开不正常,请检查xml文件头部引用xslt文件路径是否正确

    5、dist和node_modules两个文件夹只位于本地,不提交

    打包过程说明

    • 如果dist文件夹已存在,先删除该文件夹
    • 入口文件为位于根目录下的index.js,引入相关js文件,css文件和xslt文件
    • 输出路径为dist
    • js文件打包后的输出文件为bundle.js(包含引用的jQuery.js等)
    • 特别的是,因为文件比较大且独立,所以公式相关的第三方库文件,直接复制放在根目录下
    • css文件与js分开打包,所有css包含字体文件的css合并为style.css,放在根目录下
    • css文件中涉及到的静态资源,图片类型打包放入images文件夹,字体相关资源打包放入fonts文件夹
    • xslt文件打包放在根目录下
    • 其余图片统一复制到images目录下
    • xml样例复制到xmlsample目录下
    展开全文
  • Webpack(一)前端项目打包配置

    万次阅读 2017-10-09 18:22:20
    前提 全局环境下安装 nodejs 使用1、安装依赖包 如果项目没有npm管理,即没有...安装webpack依赖cnpm install webpack --save -dev –save:表示在安装的同时,将依赖包写入package.json中 -dev:表示将依赖写在d

    前提

    全局环境下安装 nodejs

    使用

    1、安装依赖包

    如果项目没有npm管理,即没有package.json文件

    初始化项目为nodejs项目

    npm init
    • 输入必要信息
    • 生成package.json文件

    安装webpack依赖

    cnpm install webpack --save -dev
    • –save:表示在安装的同时,将依赖包写入package.json中
    • -dev:表示将依赖写在devDependency(开发依赖包)中

    安装Loader,style,css,svg,url,file,font-awesome以及postCss

    cnpm install style-loader css-loader svg-url-loader url-loader file-loader font-awesome-webpack postcss-webpack --save -dev
    • style-loader :处理位于页面内的style标签中的css

    • css-loader :处理css文件中的url(这种写法是为了将css与js分开打包,利用插件ExtractTextPlugin)

                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
    },
    • svg-url-loader :svg图片处理
                {
                    test: /\.(svg|eot|woff|ttf)\w*/,
                    loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
    },
    • url-loader :

      • 1.文件大小小于limit参数,url-loader将会把文件转为DataURL;
      • 2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。有参数
    {
                    test: /\.(png|jpg|gif)$/,
                    loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
    },
    • file-loader :解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。有参数
    {
                    test: /\.xsl$/,
                    loader: "file-loader?name=[name].[ext]"
    }
    • url-loader和file-loader涉及到了4个参数:limit、name、outputPath、publicPath。

      • 其中limit已经说明过,告诉url-loader,在文件小于多少个字节时,将文件编码并返回DataURL。
      • file-loader相关的是name、outputPath和publicPath。下面解释一下这3个参数

        • name表示输出的文件名规则,如果不添加这个参数,输出的就是默认值:文件哈希。
        • 加上[path]表示输出文件的相对路径与当前文件相对路径相同,加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。
        • 加上[path]这个参数后,打包后文件中引用文件的路径也会加上这个相对路径。

        • outputPath表示输出文件路径前缀。

        • 图片经过url-loader打包都会打包到指定的输出文件夹下。
        • 但是我们可以指定图片在输出文件夹下的路径。
        • 比如outputPath=img/,图片被打包时,就会在输出文件夹下新建(如果没有)一个名为img的文件夹,把图片放到里

        • publicPath表示打包文件中引用文件的路径前缀

        • 如果你的图片存放在CDN上,那么你上线时可以加上这个参数,值为CDN地址,这样就可以让项目上线后的资源引用路径指向CDN了。
    • font-awesome-webpack :处理字体文件
    • postcss-webpack
    • extract-text-webpack-plugin :将css与js分开打包
    • clean-webpack-plugin :在打包前清空目标文件夹
    • copy-webpack-plugin :直接复制文件或文件夹到目标目录

    如果项目已经被npm管理,即包含package.json文件

    • 直接安装所有依赖
    cnpm install

    2、配置文件 webpack.config.js

    • 首先新建入口文件 index.js
      引入各种需要的js和css等文件
    require('./js/lib/jquery/jquery.js');
    require('./js/lib/jquery/jquery-1.9.1.min.js');
    require('./js/lib/jquery/jquery.colorbox.js');
    
    require('./js/common/common.js');
    require('./js/main.js');
    require('./js/carousel.js');
    // require('./js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML');
    
    require('./css/iconfont.css');
    require('./css/colorbox.css');
    require('./css/by.css');
    require('./css/jo-dhh.css');
    
    require('./xslt/jats2html.xsl');
    • 引入webpack包
    var webpack = require("webpack");
    • 设置打包入口,和输出路径、文件名称
      __dirname为当前目录
    entry: {
            index: __dirname + "/index.js",
            // vendor:['jQuery'],
        },
        output: {
            path: __dirname + "/dist",
            //打包后的文件存放的地方
            filename: "bundle.js"
        },
    • 为了将js与css分开打包,需要引入插件extract-text-webpack-plugin
    var ExtractTextPlugin = require("extract-text-webpack-plugin");

    在module中的loader参数中,对css的处理部分修改为

    {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
    },

    在plugins中添加css文件打包后的输出路径和文件名

    new ExtractTextPlugin("style.css")

    说明:这里如果不将参数格式显示设置为fallback,use格式,后面在打包时会报css文件错误

    • 对图片进行处理
      图片有三种处理方式,一种图片是在css中被设置为背景样式,这里可以直接识别并放入目标文件夹;
    {
                    test: /\.(png|jpg|gif)$/,
                    loader: 'file-loader?name=images/[name].[ext]'
    },

    另一种是在html中通过img标签的src引入,因为webpack对html支持不友好,所以需要借助插件html-webpack-plugin

    第三种是借用拷贝插件,直接强行拷贝所有图片,因为本项目图片是在xslt中引用,所以采用第三种和第一种结合的方式处理图片,在plugin参数中添加

    new CopyWebpackPlugin([
                {
                    from: 'css/images',
                    to: 'images'
                },
                {
                    from: 'xmlsample',
                    to: 'xmlsample'
                },
                {
                    from: 'js/MathJax',
                    to: 'MathJax'
                }
    
    ]),
    • 对字体文件处理

      这里需要注意:字体文件的css样式和其余资源文件的路径对应问题


    ==> 如果css是与其余的css一起打包,那么其中对fonts资源的引用路径也会自动发生变化,一定注意,是个大坑!!==
    {
                    test: /\.(svg|eot|woff|ttf)\w*/,
                    loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
                },
    • 其余格式文件处理,项目主要是利用xslt对xml进行转换,所以需要将xslt也进行处理
    {
                    test: /\.xsl$/,
                    loader: "file-loader?name=[name].[ext]"
    }
    • 因为涉及到多个文件打包成一个文件,所以开启source-map映射,方便调试,发布版本可以关闭该功能
    devtool: 'source-map',
    • 拷贝其余文件
    var CopyWebpackPlugin = require("copy-webpack-plugin");
    new CopyWebpackPlugin([
                {
                    from: 'css/images',
                    to: 'images'
                },
                {
                    from: 'xmlsample',
                    to: 'xmlsample'
                },
                {
                    from: 'js/MathJax',
                    to: 'MathJax'
                }
    
            ]),
    • 因为每次打包结果可能都不一样,所以每次打包之前需要手动删除dist文件夹,不太方便,在网上找到一款可以自动删除目标文件夹的插件
      懒惰才是最大生产力哈哈哈
    var CleanWebpackPlugin = require("clean-webpack-plugin");
    new CleanWebpackPlugin(
                ['dist'],
                {
                    root: __dirname,                 //根目录
                    verbose: true,                  //开启在控制台输出信息
                    dry: false                  //启用删除文件
                })
    • 配置文件代码
    var webpack = require("webpack");
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    var CopyWebpackPlugin = require("copy-webpack-plugin");
    var CleanWebpackPlugin = require("clean-webpack-plugin");
    
    module.exports = {
        entry: {
            index: __dirname + "/index.js",
            // vendor:['jQuery'],
        },
        output: {
            path: __dirname + "/dist",
            //打包后的文件存放的地方
            filename: "bundle.js"
        },
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                },
                // [hash:8]
                // {
                //     test: /\.(png|jpg|gif)$/,
                //     loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
                // },
                {
                    test: /\.(png|jpg|gif)$/,
                    loader: 'file-loader?name=images/[name].[ext]'
                },
                {
                    test: /\.(svg|eot|woff|ttf)\w*/,
                    loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
                },
                {
                    test: /\.xsl$/,
                    loader: "file-loader?name=[name].[ext]"
                }
            ]
        },
        devtool: 'source-map',
        plugins: [
            new ExtractTextPlugin("style.css"),
            // new webpack.optimize.CommonsChunkPlugin({
            //     names: ['vendor', 'manifest'],
            // }),
            new CopyWebpackPlugin([
                {
                    from: 'css/images',
                    to: 'images'
                },
                {
                    from: 'xmlsample',
                    to: 'xmlsample'
                },
                {
                    from: 'js/MathJax',
                    to: 'MathJax'
                }
    
            ]),
            new CleanWebpackPlugin(
                ['dist'],
                {
                    root: __dirname,                 //根目录
                    verbose: true,                  //开启在控制台输出信息
                    dry: false                  //启用删除文件
                })
        ]
    }
    展开全文
  • 遇到的问题使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错。在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看...
  • 实施开发环境的搭建参考我的另一篇博文 Spring集成React用来开发前端—-SpringMVC + react 开发实时测试之前的文章主要介绍了react及如果使用,但是在spring开发中可能需要集成react到开发环境中,这里mark一下:...
  • Webpack安装教程

    千次阅读 2018-08-13 16:43:30
    webpack是什么,它是一个根据模块依赖关系进行静态分析的工具,简单来说就是打包工具,在当前的前端打包工具的使用时是趋势的发展;下面进入正题 在安装webpack前,你必须为本机安装 node.js ;这个你直接去官网...
  • react 项目搭建

    千次阅读 2016-07-11 21:31:35
    2、安装webpack(含服务器等) npm install webpack webpack-dev-server babel -g 注意:-g表示第一条命令是全局安装   3、添加package.json文件(目前只知道是放一些项目的描述信息),进入项目目录 命令...
  • Vue 首屏加载速度优化-这篇就够了

    千次阅读 2019-09-03 16:37:08
    分析文件大的原因利用webpack-bundle-analyzer 分析器,分析项目依赖关系3.项目依赖优化---插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个...
  • webpack 从入门到工程实践

    千次阅读 2017-10-16 11:39:37
    GitChat 作者:张旺 关注微信公众号:GitChat 技术...本文的初衷是和你一起理清`webpack`的使用逻辑,以便能更加容易的编写及拓展自己项目所需的配置文件。不过也得提前说明本文可能并不是一篇好的可以跟着操作的教程
  • webpack loader 列表

    千次阅读 2016-06-13 10:40:57
    约定loader一览表 扩展名 语义 loader举例 .js returns module exports babel-loader .ts returns module exports ts-loader .coffee returns module exports coffee-loader coffee-redux-loader ...
  • npm install --save-dev compression-webpack-plugin 第二步:修改vue.config.js配置文件,如果没有vue.config.js,在根目录自己创建一个,下面是配置文件的代码 const path = require('path'); const webpack = ...
  • vue基于webpack 模板的目录结构以及目录作用的解析

    千次阅读 多人点赞 2018-01-03 14:57:03
    一个vue目录建好如下: 1.build 2.config 3.node_modules 4.src 5.static 6.babelrc babelrc文件是babel的配置文件 主要适用于编译es6转义为es5 一般用2个插件es2015,stage-2,transfer-..."comments": false
  • 最近要做一个js解析markdown的项目,所以当然想到了ant design,不过ant design内部又使用了atool-build脚手架,所以决定好好研究一下。...1.atool-build的简单说明该脚手架只是对webpack进行了简单的封装。首先,w
  • Vue.js(一) Vue.js + element-ui 扫盲

    万次阅读 多人点赞 2019-08-14 11:29:30
    一:node.js是什么 我们知道javascript代码只能在浏览器上运行,只有浏览器能够解析js代码,如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。...
  • webpack默认的配置文件是webpack.config.js,当在命令行中输入webpack时默认找的是webpack.config.js。如果你使用webpack --config webpack.html.config.js,查找的就是webpack.html.config.js文件。通过这种方式可以...
  • vue项目部署在tomcat上首先用 npm run build 命令将前项目打包,如果没有改过打包文件的路径会在项目根目录下出现一个dist文件夹,这个文件夹就是项目的打包内容。 将打包好的dist文件夹复制到tomcat的webapps...
  • webpack3.x文件配置

    千次阅读 2017-10-19 15:26:27
    webpack3.x 配置webpack3.x 主配置webpack.config.js文件,每个模块的详细信息都有一定的注释,如果有不对的地方,还请指教!大纲: 1、创建package.json文件 2、创建.babelrc文件 3、创建webpack.config文件...
  • react搭建运行打包常见错误

    千次阅读 2019-08-21 14:44:04
    要素: webpack.config.js中, ...运行:webpack打包文件; 【运行报错】---------------------------------- 1 webpack.config.js配置加载器报错: configuration.module has an unknown property 'loader...
  • webpack集成bootstrap进行多页面开发

    千次阅读 2017-05-16 16:49:52
    这篇文章已经过时了,有兴趣的可以看看github上...webpack还是很有搞头的,再搞搞gulp都不用了。。。 最近以jquery、bootstrap为例,搞了个多页面,多入口开发结构,mark一下。   开发人员主要集中在以上三
1 2 3 4 5 ... 20
收藏数 1,147
精华内容 458
关键字:

webpack xml打包设置路径