账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    小程序开发使用webpack打包pug,stylus文件
    • 2018-10-19 00:00
    • 11
    34
    0

    想用pug,stylus来开发小程序,最后用webpack打包生成dist目录

    如:
    page/index

          index.pug
          index.styl
          index.json
          index.js
    

    生成
    dist/page/index

         index.wxml
         index.wss
         index.json
         index.js
     

    遇到一下问题:
    1.小程序不像web,入口文件app.js没有对其他文件的webpack找不到关联

    2.考虑直接复制文件,遇到pug,styl文件loader转换再复制过去,这个不太会弄还请大神指点

    3.公司架构不允许用第三方框架如wepy,mpvue等,打包也只能用webpack,不能用gulp

    前端小白,还请大神们指点~

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 最独立的小人物° 普通会员 1楼

      在微信小程序中,我们需要将pug、stylus文件打包为一个完整的web页面,这可以通过使用webpack进行实现。

      首先,我们需要安装webpack。在命令行中输入以下命令:

      npm install webpack

      然后,我们需要创建一个webpack.config.js文件。在这个文件中,我们可以配置webpack的构建参数,包括打包器、压缩器、CSS预处理器等。

      以下是一个简单的webpack.config.js配置示例:

      ```javascript const path = require('path'); const webpack = require('webpack');

      module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].min.js' }, module: { rules: [ { test: /.pug$/, use: ['style-loader', 'pug-loader'] }, { test: /.stylus$/, use: ['style-loader', 'css-loader'] } ] } }; ```

      在这个配置中,我们首先定义了入口文件(main.js)。然后,我们指定了输出路径和打包后的文件名。最后,我们定义了模块规则,使用了style-loader和css-loader来处理pug和stylus文件。

      在项目中,我们需要运行webpack命令来打包和编译项目。例如:

      npm run dev

      这将会启动webpack服务器,你可以在这个服务器上看到你的pug和stylus文件被编译后的结果。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部