精华内容
下载资源
问答
  • 2021-05-01 16:47:45

    一、什么是loader?

    • 从webpack本身来说,主要是用作处理我们写的js代码,并且webpack会处理js之间的依赖。
    • 但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css,图片,也包括一些高级的ES6转成ES5代码,将TypesScript代码庄臣ES5代码,将scss,less,转成css,将.jsx,.vue文件转成js文件等等。
    • 对于 webpack本身的能力来说,对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpack能够去处理其他类型的文件,并将他们装换为有效模块,以供应用程序使用。以及添加到依赖图中。
      -loader使用
      步骤一:通过npm安装需要使用的loader
      步骤二:在webpack.config.js中的modules关键字进行配置

    1.loader处理样式资源

    1.1 依赖less文件

    在入口文件中引入一个less文件

    	import './css/index.less'
    

    1.2 安装对应的loder

    less-loader则对less文件进行加载,less是将less语法转译为css语法。

    	npm install less less-loader -D
    

    转译为css,还要使用import加载,这时候我们需要使用css-loader来加载css文件

     npm install css-loader -D
    

    此时css的模块加载完成,最后还需要将导出的模块作为样式添加到DOM中,这时候我们就用到了style-loader

    npm install style-loader -D
    
       //loader的配置
        module:{
            rules:[
                //详细的loader配置
                {   //表示.css结尾的文件
                    test:/\.css$/,
                    //使用那些loader进行处理
                    use:[
                        //user中的loader执行顺序,从右到左
                        //创建style标签,将js中的样式资源插入进行,添加到head中生效
                        'style-loader',
                        //将css文件变成commonjs模块加载到js中,里面内容是样式字符串
                        'css-loader',
                    ]
                },
                {
                    test:/\.less$/,
                    user:[
                        'style-loader',
                        'css-loader',
                        //将less文件编译成css文件
                        'less-loader'
                    ]
                }
            ]
        },
    

    1.3将css导出为一个单独文件

    将css文件打包成一个单独文件,这里我们需要使用一个插件来实现:

    1.安装插件:

       npm install MiniCssExtractPlugin -D
    

    2.文件配置

     module:{
            rules:[
               { 
                   test:/\.css$/,
                   use:[
                    //这个loader取代style-loader,作用:提取js中的css成单独文件
                       { loader:MiniCssExtractPlugin.loader,
                         options: {
                            esModule: false,
                            //表示输出的路径
                             publicPath: "../",
                        }
                    },
                     'css-loader'            
                    ]
                }
            ]
        },
     //插件使用
     plugins:[
            new MiniCssExtractPlugin({
            	//输出的文件名
                filename:'css/built.css'
            })
        ],
    

    2.loader处理图片资源

    当我们在项目中导入图片资源的时候,也需要将它进行打包为模块,这里也需要使用loader来处理图片

    2.1 引入依赖

    import img from './image.png'
    //或者是在css文件中引入
    background:ulr('./image.png')
    

    2.2 安装相应的loader

    url-loader功能类似于file-loader,用于将文件转换为base64URL格式。

    	npm install url-loader -D
    

    2.3文件配置

    //处理图片资源
    {
    	test:/\.(png/jpg/gif)$/,
    	user:[
    		//使用对象
    		{loader:'url-loader',
    		 option:{
    		 limit:8192,
    		 //添加一个name属性,img表示输出的文件夹名,[name]表示文件原名,hash5表示文件名的长度 ext:表示使用图片原来的后缀名
    		 name:'img/[name].[hash:5].[ext]',
    		 }
    		 
    		}
    	]
    }
    

    1.option中的limit属性限制文件大小。文件大小小于指定的大小,则进行base64编码,减少http请求数量。返回一个DataURL。此时输出的图片资源是一个base64编码的文件。
    2.如果文件体积等于或大于限制,默认情况下将使用file-loader并将所有参数传递给它。此时的图片文件是一个http请求,输出一个http的访问地址。

    所以这里必须要安装file-loader这个包来处理图片:

    	npm install file-loader -D
    
    更多相关内容
  • 使用webpack打包,最爽的事情莫过于可以直接require文件了,但是这 同时带来了一个问题,就是所有的文件整合一起,那这一个包就太大了。 基于此:下面我们来了解下webpack的打包(主要是将如何将我们需要的内容...
  • 但打完包出来的页面却报找不到资源的错误。 查了一下原因,css引入图片再打包后,style-loader无法设置自己的publicPath,于是我改变了ExtractTextPlugin的css路径publicPath。 if (options.extract) { retur
  • 最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误。。。网上查找了一堆解决办法,总结如下 一、首先修改config目录下的index.js文件 将其中build的...
  • 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将js中的变量变成局部,能供其他js调用。因此弃用了webpack。选用了uglifyjs。原因:webpack里也有用uglifyjs的webpack版:uglifyjs-webpack-...

    背景:

    项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩。

    项目的js中声明了一些全局变量 供其他js调用。

    这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将js中的变量变成局部,不能供其他js调用。

    因此弃用了webpack。选用了uglifyjs。

    原因:

    webpack里也有用到uglifyjs的webpack版:uglifyjs-webpack-plugin。

    打包途径:

    打包源文件:dev文件夹下的js文件====>目标文件:js文件夹。

    目录结构

    bf0d5df7aaeb822c28e8cfe23ab19b8e.png

    使用:

    1、如果是es5 使用uglify-js 官网的默认分支就是这个。

    2、如果是es6 使用uglify-es 官网的harmony分支 下载下来就是uglify-es。

    步骤:

    首先确认自己电脑有没有安装node,这是用node启动的。

    1、下载uglifyjs 这里我下载的是es版。

    npm install uglify-es -D

    2、写一个package.json,下面的package.json可以下载下来 直接npm i 就省略了第一步了。

    scripts里面是我写的命令

    我想在development下打包后也能调试 用到了sourceMap(映射),

    在production下打包压缩。

    我的入口文件 起名了entry.js

    {

    "name": "ocplayermin",

    "version": "1.0.0",

    "description": "ocplayer min version",

    "main": "entry.js",

    "scripts": {

    "build_min": "NODE_ENV=production node entry.js --progress",

    "build_min_dev": "NODE_ENV=development node entry.js --progress"

    },

    "keywords": [],

    "author": "",

    "license": "MIT",

    "dependencies": {},

    "devDependencies": {

    "uglify-es": "^3.3.9",

    "uglify-js": "^3.7.4"

    }

    }

    注意:NODE_ENV在windows下不兼容 需要安装cross-env插件:npm install cross-env --save-dev

    安装完 在 build_min 和 build_min_dev后加上 cross-env 就可以。

    2382cecedc0ef0cafcfc33f12cdef3e6.png

    3、entry.js代码

    打算把dev文件下的js文件打包到js文件中。

    代码逻辑:

    1、遍历dev文件夹下的所有js文件,获取到文件名和旧路径。

    2、生成js文件夹,如果没有js文件夹 则创建,生成新文件的路径。

    3、development下 用UglifyJS.minify压缩生成sourceMap文件。

    4、production下 由于development环境下生成了.js.map文件,这里删除.js.map,生成.js文件。

    遇到的问题:

    由于在浏览器读取时,映射 source map读取的文件需要和js是同一个目录 因此需要将前端的端口路径,赋值到.js.map。

    例如:地址:127.0.0.1:5500/minversion/index.html;

    推荐一款好用的编辑器(用vcode编辑器的open with live server启动项目,默认端口5500)

    读取前端js路径:127.0.0.1:5500/minversion/js/xxx.js;

    映射生成的路径也得是127.0.0.1:5500/minversion/js/xxx.js.map;如果是'./js/xxx.js.map'是读取不到的。

    我新建了一个config.json 专门存取常量,我将前端的端口写在这里 声明为:PLUGIN_URL只要修改这个,entry.js就能读取到。

    对source map 不太知道的 可以看官网文档。

    config.json

    {"pluginUrl":"http://127.0.0.1:5500/minversion"}

    entry.js

    const path = require('path');

    const fs=require('fs');

    const UglifyJS = require("uglify-es");//兼容es6

    //var UglifyJS = require("uglify-js");//es5

    const ORIGIN_PATH='/dev';

    const ORIGIN_DIR = '.'+ORIGIN_PATH; // 原目录

    const DESTINATION_PATH='/js';

    const DESTINATION_DIR = '.'+DESTINATION_PATH;//打包后的目录

    var PLUGIN_URL="";/*地址*/

    PLUGIN_URL=JSON.parse(fs.readFileSync('./config.json','utf-8')).pluginUrl;

    // 遍历目录得到文件信息

    function getPath(_path, callback) {

    let files = fs.readdirSync(_path);

    files.forEach(function(file){

    //判断文件是否存在

    if (fs.statSync(_path + '/' + file).isFile()) {

    callback(_path, file);

    }

    });

    }

    //生成压缩后的文件

    function buildMin (callback) {

    /*如果不存在min 就会创建min文件夹*/

    if ( !fs.existsSync(DESTINATION_DIR) ) {

    fs.mkdirSync(DESTINATION_DIR);

    }

    // 运行

    getPath(ORIGIN_DIR, function (_path, file) {

    let fileName = file.match(/(\S+)(\.\S+)$/)[1]; // 获得文件名

    let oldPath = _path + '/' + file, // 原路径

    newPath = DESTINATION_PATH + '/' + fileName+'.js'; // 新路径 到不了.js

    const _code = fs.readFileSync(oldPath, 'utf-8');

    callback(newPath,fileName,_code)

    });

    }

    //删除文件

    function deleteFile(delPath, direct) {

    delPath = direct ? delPath : path.join(__dirname, delPath)

    try {

    /**

    * @des 判断文件或文件夹是否存在

    */

    if (fs.existsSync(delPath)) {

    fs.unlinkSync(delPath);

    } else {

    console.log('inexistence path:', delPath);

    }

    } catch (error) {

    console.log('del error', error);

    }

    }

    if (process.env.NODE_ENV === 'production') {

    /*生产环境*/

    getPath(DESTINATION_DIR, function (_path, file) {

    //删除.map文件

    if(file.indexOf('.js.map')>-1){

    let delp = _path+'/'+file;

    deleteFile(delp)

    }

    })

    //打包

    buildMin(function(newPath,fileName,_code){

    const minCode = UglifyJS.minify(_code,{

    compress:{pure_funcs:'console.log'}

    }).code;

    fs.writeFileSync('.'+newPath, minCode);

    });

    }

    if (process.env.NODE_ENV === 'development') {

    /*开发环境*/

    //打包

    buildMin(function(newPath,fileName,_code){

    var _codeFname = "."+newPath;

    var _code_file={};

    _code_file[_codeFname]=_code;

    const _minObj = UglifyJS.minify(_code_file,{

    sourceMap: {

    filename:fileName+'.js',

    url:PLUGIN_URL+newPath+".map",//生成的就是127.0.0.1:5500/minversion/js/xxx.js.map

    includeSources:PLUGIN_URL+newPath+".map",

    },

    keep_fnames:true,

    warnings: true,

    });

    fs.writeFileSync('.'+newPath, _minObj.code);

    fs.writeFileSync('.'+newPath+'.map', _minObj.map);

    });

    }

    至此就打包成功啦,可以复制到自己项目中试一下。记得将源文件夹、目标文件夹改成你的项目路径,还有PLUGIN_URL。

    展开全文
  • webpack 文件打包

    2021-06-07 22:12:32
    使用webpack打包文件 要打包文件,首先我们需要初始化一个项目,前面我们已经创建好了一个 xkd_webpack 的项目,并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules ...

    上一节中,我们已经安装好了 webpack ,本节我们来学习 何使用 webpack 进行文件打包。

    使用webpack打包文件

    要打包文件,首先我们需要初始化一个项目,前面我们已经创建好了一个 xkd_webpack 的项目,并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹,如下所示:

    在实际项目中,为了方便管理许多文件,我们可能需要创建一个 src 文件夹存放入口文件等开发文件,然后创建一个 dist 文件夹存放最终打包的文件,还有其他类型的文件,为了方便管理我们也会放在同一个目录下。

    但是因为我们这里只是举例说一下如何使用 webpack 打包文件,所以我们直接项目根目录下,创建一个静态页面 index.html 和一个 JS 的入口文件 index.js 文件,文件名称是我们自定义的,如果你想使用其他的名称也是可以的。

    下面是 index.html 文件的内容:

    <html>
        <head>
            <meta charset="utf-8">
            <title>webpack入门</title>
        </head>
        <body>
            <script type="text/javascript" src="bundle.js"></script>
        </body>
    </html>
    

    在这个 HTML 文件中我们引入了一个 bundle.js 文件,这个 bundle.js 文件就是最终的打包后的文件,但是现在还没有生成哟,要等我们执行完打包命令后才会生成这个文件。

    然后入口文件 index.js 的内容如下所示:

    document.write('你好,侠课岛!');
    

    最后执行下列命令,就可以成功将 index.js 文件打包到 bundle.js文件中:

    webpack index.js -o bundle.js
    

    执行命令效果如下所示:

    命令执行成功后,项目根目录下会生成一个 bundle.js 文件。这个文件的作用就是用了一个立即执行函数,然后将 index.js 的内容封装成一个函数,作为参数传进内部执行,这样就完成了文件的打包:

    此时我们在浏览器中打开 index.html 文件,页面将会显示 “你好,侠课岛!”,这同时也能证明 index.js 文件成功打包到了 bundle.js 文件中,因为我们只在 index.html 文件中引入了 bundle.js 文件。

    打包多个文件

    当然我们在项目中肯定不只有一个 .js 文件,那么如果我们除了 index.js 文件还有其他的 .js 文件,要如何做呢。

    示例:

    例如项目中还有一个 module.js 文件,内容如下所示:

    module.exports = '侠课岛欢迎你!'
    

    这样我们可以修改入口文件 index.js,将创建好的 module.js 模块引入到入口文件中:

    document.write('你好,侠课岛!')
    document.write(require('./module.js')) // 引入模块
    

    再次执行 webpack index.js -o bundle.js ,会重新打包文件。

    在页面启动时,会先执行 index.js 文件中的代码,其它文件中的代码会在执行到 require 语句的时候再执行。 此时刷新浏览器,我们可以看到浏览器中的显示内容发现了改变,显示内容变为 “你好,侠课岛!侠课岛欢迎你!”。

    webpack 会分析入口文件,解析包含依赖关系的各个文件,这些文件都打包到 bundle.js 中。webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。

    总结

    在旧版本的 webpack 中,我们是使用 webpack index.js bundle.js 命令来执行打包操作,而新的 webpack4.0+ 版本打包文件时要在命令中加一个 -o ,否则会报错。

    链接:https://www.9xkd.com/

    展开全文
  • 在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 ...打包后在dist目录的发现没有css文件。这是因为css
  • 最近写了一个vue小项目,想单独作为一个web项目发布,所以就准备放资源项目的public文件夹下,遇到一些小问题,在此总结一下。 资源路径如下: public目录配置的访问路径为”/”,在这样的情况下,我们的访问...
  • 其实前面的都足以展示出webpack在众打包工具中的优势 webpack的优势在于 可以打包大规模项目文件 以及静态资源文件 这才是webpack独有的优势 首先我们来创建一个webpack项目 找一个文件夹 在终端中输入 npm init ...

    其实前面的都不足以展示出webpack在众打包工具中的优势
    webpack的优势在于 可以打包大规模项目文件 以及静态资源文件
    这才是webpack独有的优势
    首先我们来创建一个webpack项目
    找一个文件夹 在终端中输入

    npm init 
    

    根据提示操作 就会生成一个package.json

    将webpack引入进来

    npm install webpack webpack-cli --save-dev
    

    然后在终端输入

    npm install html-webpack-plugin --save
    

    再在终端输入

    npm install webpack-dev-server --save
    

    打开package.json 给 scripts 添加上
    “build”: “webpack-dev-server”,
    “webpack”: “webpack”
    两个配置
    在这里插入图片描述
    在根目录建立src文件夹
    在src下创建一个assets文件夹
    里面放一个css文件和一个图片
    在这里插入图片描述
    和我同名就可以直接复制代码了 之后可以看明白在改名
    carnival.png
    在这里插入图片描述
    index.css

    
    * {
      color: red;
    }
    
    
    

    在src下创建index.html
    index.html参考代码如下

    <!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>Document</title>
    </head>
    <body>
        <div id = "text"></div>
    </body>
    </html>
    

    在src下创建output.js
    output.js参考代码如下

    import carnival from "./assets/carnival.png"
    import indexcss from "./assets/index.css"
    
    const output = () => {
        console.log("资源加载");
        let cssin = document.createElement("link");
        cssin.setAttribute("href",indexcss);
        cssin.setAttribute("rel","stylesheet");
        document.querySelector("head").appendChild(cssin);
        document.getElementById("text").innerHTML = `引入成功<img style = "width: 10em;height: 10em;" src = ${carnival}/>`;
    }
    
    export default output
    

    在src下创建index.js
    index.js参考代码如下

    import output from "./output"
    
    window.onload = function() {
        output();
    }
    

    在项目根目录创建webpack.config.js
    webpack.config.js参考代码如下

    //通过node获取到当前文件的位置
    const path = require('path')
    //导入刚引入的第三方插件html-webpack-plugin
    const HtmlWebpackPplugin = require('html-webpack-plugin')
    module.exports = {
        //设置当前入口文件
        entry: './src/index.js',
        //出口配置
        output: {
          //打包的文件名
          filename: 'bundle.js',
          //生成的文件位置
          path: path.resolve(__dirname, './distribution')
          //设置自动清理掉原本的打包文件
          //clean: true
        },
        mode: 'none',
        //webpack插件配置
        plugins: [
          //实例化html-webpack-plugin插件功能
          new HtmlWebpackPplugin({
            //html-webpack-plugin参数配置
            //指定打包HTML文件参照的模板HTML
            template: './src/index.html',
            //生成的html文件名称
            filename: 'app.html',
            //定义打包的js文件引入在新html的哪个标签里
            inject: 'head'
          })
        ],
        //设置webpack-dev-server监听属性
        devServer: {
          //设置webpack-dev-server监听路径
          static: './distribution'
        },
        //设置文件格式处理
        module: {
          rules: [
            {
              //转换文件格式
              test: /\.png$/,
              //文件打包方式
              type: 'asset',
              //文件打包代理路径和名称  这里我们采用随机
              generator: {
                filename: `./assets/[contenthash][ext]`
              }
            },
            {
              //转换文件格式
              test: /\.css$/,
              //文件打包方式
              type: 'asset',
              //文件打包代理路径和名称  这里我们采用随机
              generator: {
                filename: `./assets/[contenthash][ext]`
              }
            }
          ]
        }
    }
    

    然后我们在终端执行

    npm run webpack
    

    重新打包
    然后执行

    npm run build
    

    启动项目
    在这里插入图片描述
    用终端路径访问浏览器
    点击app.html
    在这里插入图片描述
    可以看到 css 样式 和 图片都加载出来了
    在这里插入图片描述

    展开全文
  • 打包后的文件就是一个函数自调用,当前函数调用时传入一个对象 这个对象我们为了方便将之称为模块定义,它就是一个键值对 这个键名就是当前被加载模块的文件名与某个目录的拼接 这个键值就是一个函数,和 node.js 里...
  • webpack打包文件在本地与线上运行

    千次阅读 2022-03-30 20:05:42
    根据上一篇webpack打包优化之后,想将成果物在本地打开运行,发现只能展示空白页面。为何将成果包扔在线上可以正常运行呢,本文探讨一下。 本地运行 打包后的成果物文件如下图所示。 直接打开index.html文件,页面...
  • vue项目,访问打包后的项目,输入路径后,页面加载空白。这时会有两类问题,都是路径问题。 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->...
  • Webpack 作为 模块打包器(Module bundler),可以把零散的文件打包到一个 JS 中,对于有环境兼容的代码可以在打包过程中通过 模块加载器(Loader) 对其进行编译转换 Webpack 还具备 代码拆分(Code Splitting) ...
  • webpack打包

    2021-12-10 08:41:15
    webpack是一个流行的前端项目构建工具(打包工具),因为我们目前web开发会有下面几个问题: 文件之间互相依赖关系复杂 浏览器对于Es6的模块化支持不是很友好 浏览器对于js的新语法特性兼容性也不是很好 webpack...
  • 因此在项目打包的时候,希望保持IP地址的文件打包,因此就需要把需要修改的常量独立出来,存放在一个js文件中,且被压缩。解决步骤:1、新建一个js文件,并存放在static文件夹下,例如新建一个webSockrtUrl.js...
  • React 使用webpack打包

    2022-03-08 21:33:44
    1、新建一个项目文件夹,打开终端,切换到到项目目录下: npm init -y 这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。 2、新建一个文件夹public,在文件夹内创建index.html文件,添加: ...
  • 如果我们直接将我们前段代码放Tomcat下的webapps/中的话,我们的 找到这个文件
  • 文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1、config—index.js...本篇博客是关于Webpack打包vue的配置以及一些问题解决整理,若文章中出现相关问题
  • 静态资源如js访问不到 分析并且解决问题 明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了。  静态资源找不到如js文件 资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目...
  • webpack打包教程

    千次阅读 2021-03-07 07:42:58
    创建package.json文件命令:npm init安装webpacknpm install --save-dev webpacknpm install --save-dev webpack-cli全局安装:npm install --global webpack webpack-cli打包默认entry入口 src/index.js默认output...
  • webpack打包流程

    千次阅读 2022-02-14 16:42:19
    webpack:是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个...
  • webpack打包访问不到json文件

    千次阅读 2017-12-03 12:55:00
    在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败。 二、预期结果 能正常获取数据,渲染页面。 三、问题...
  • 使用 webpack 打包 ts 代码
  • Webpack打包

    2020-11-19 17:10:20
    Webpack打包
  • 此文介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档。 1.配置webpack.config.js 将output.publicPath改成上传的cdn地址, 例(对应上面上传配置): publicPath: ...
  • webpack打包原理和manifest文件分析

    千次阅读 2018-04-19 17:07:14
    文件依赖管理 梳理文件之间的依赖关系资源加载管理 处理文件的加载顺序(先后时机)和文件的加载数量(合并、嵌入、拆分)效率与优化管理 提高开发效率,完成页面优化webpack是一个现代Javascript应用的打包工具。...
  • 使用webpack打包vue后,将打包好的文件,发布Tomcat上,访问成功,但是刷新后页面报404错。 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看...
  • /* 配置一个webpack,需要安装 webpack webpack-cli yarn add webpack webpack-cli -D 或者 npm install webpack webpack-cli -D 先配置一个 package.json yarn init 或者 ...同时他也是webpack的默认配置文件 配置

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,770
精华内容 8,308
关键字:

webpack打包访问不到文件